Simple modal

Showing the body of another page in a modal is super simple! Just create a link with data-modal-selector and that link will automatically trigger a modal on the supported platforms. You may also provide a selector to filter out a specific html element.

You can also set custom classes on modals by adding the data-modal-classes attribute to the link that should trigger the modal. This will override the default classes on the modal that defines width, so make sure that whatever classes you apply define width and position for the modal. The recommended approach is to use columns, according to our grid, since the modal is already wrapped in a row.

This modal link should trigger a modal, filtering on the provided selector.

This modal link should trigger a modal that has defined what classes to apply to the modal, in this case col-8 col-offset-2

This is the jade code needed to create it (the id is not necessary): a(href="/demo/typography/headings.html", id="modal-trigger", data-modal-selector='.row') This modal link

This modal link should trigger a modal that closes quickly since the url is not available.

Inline modal

If you want to render content inside of the modal based on a string or by cloning/moving an element in the page - use the inline/template modal variants.

The inline modals are invoked by running and take a string representation of html or a dom element reference as its first paramter, and an object containing event listener mappings as its second parameter.

Modal inline

Modal template

The js call to do this might look like this

$('#modal-template').click(function() {$('#some-template').clone(), { 'click .ui-btn': function(e) { alert('You clicked the button'); return false; } }); return false; });


When a modal is opened and loaded, an event is triggered on the body -modal-content-loadedAny content that is designed to be rendered inside a modal should subscribe to this event and initialize itself properly when the event is triggered.

This is a template