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