Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Requires JavaScript alert plugin

For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Component-level alerts

Fancybox Modal Examples

Here is a template for a fancybox modal (popup) that opens and closes using the jquery.fancybox script, but uses the built-in Bootstrap css properties to style the elements of the modal - ie. head, body, footer.

This link opens the modal using the class fb_dialog:

Click Me to open the modal dialog.

The example above is comfigured as a login modal and provides and example of building a simple form into the modal.

Generic modal example

Click Me to open generic modal dialog.

Example of the modal in visible form:

More Examples

DOM Message
The spinny "Processing" dialog. Use only modal-body, modal-header or modal-footer.

Open DOM message

Session Expired message
One of several "Your session has expired" messages here. No modal-header, just modal-body and modal-footer.

Open sessionSoftAlert

Width Classes

Add the appropriate class found below to your Fancybox content <div> to set a max-width.

class="modal-300" - sets popup width to 300px
class="modal-400" - sets popup width to 400px
class="modal-500" - sets popup width to 500px
class="modal-600" - sets popup width to 600px
class="modal-700" - sets popup width to 700px
class="modal-800" - sets popup width to 800px
class="modal-900" - sets popup width to 900px
class="modal-1000" - sets popup width to 1000px
class="modal-container" - sets popup width to 1170px, width of the page container
class="modal-fullscreen" - sets popup width to fullscreen

Example: to make a 700px wide popup, link to it like so:

<a href="#MyPopup" data-fancybox>Open MyPopup</a>

With the following Fancybox content:

<div id="MyPopup" class="modal-700">
  MyPopup content
</div>

Open the Fancybox