A modal window can load content into a popup dialog. The content can be loaded from on the page or from an external page and it can be either static or dynamic. The modal will automatically be centered on the page and can be dismissed clicking outside of it or with a close trigger. For mobile screens, the modal will expand to full-screen size.
Each modal window can load content in three ways: from inline content, via AJAX on the same site, or in an iframe from an external site. Here's how the trigger works:
<!-- Inline Trigger --> <a class="button modalTrigger" href="#exampleModal">Example Modal</a> <!-- Same-site Ajax Trigger --> <a class="button modalTrigger" href="index.html">Example Modal</a> <!-- External Site Iframe Trigger --> <a class="button modalTrigger" href="http://www.virtuosimedia.com/">Example Modal</a>
To close a modal, add a link or a button with a class of close somewhere inside of the
modal.
Warning A close button must be manually added to every type of modal, with the exception of iframe modals (they add their own close button). If a close button is not added, mobile users will not be able to close the modal.
The modal trigger must reference the id of the modal content container in either the
href or data-target attribute.
Modal containers must contain the class modal and are hidden by default.
Note The id modal is reserved for the modal itself, so
don't use it or you will encounter unexpected errors.
The width of a modal window can be determined by adding a col3-12 class to the modal
container, as described in the grid documentation. Though not required,
additional styling can be added using additional content containers: modalHeader,
modalContent, and modalFooter as outlined below.
<div id="exampleModal" class="modal col6"> <div class="modalHeader"> <h6>Example Modal</h6> <a href="#" class="close"><span class="iconLargeDelete3"></span></a> </div> <div class="modalContent"> <p>This is a modal window built with inline content and featuring an overlay. The text below shows what happens when modal content overflows.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non magna metus. Vivamus vitae mi dui, eu accumsan leo. Vestibulum sagittis malesuada varius. Curabitur ultricies, diam interdum posuere congue, lorem eros facilisis dui, a aliquet quam erat at quam. Nunc pellentesque consectetur dolor vel venenatis. Nunc libero enim, mollis at fermentum eget, lobortis non enim. Maecenas justo augue, pharetra ut ullamcorper in, feugiat ac arcu. Duis quis augue ut libero pharetra ultricies. Vivamus vitae risus nibh. Phasellus eget aliquam ligula. Praesent malesuada, risus sit amet iaculis pretium, risus erat sagittis magna, in vestibulum libero velit a odio. Praesent est justo, ultricies id pretium vel, vehicula ut leo. Nunc et sapien non magna volutpat facilisis.</p> <p>In placerat mollis lorem sit amet tincidunt. Nulla iaculis, orci et blandit lacinia, purus eros pellentesque sapien, non ornare erat elit eu risus. Nulla cursus vulputate tempus. Sed tempor ante adipiscing lorem malesuada non pretium ante malesuada. Nullam dignissim, tortor sed ornare convallis, est orci scelerisque odio, nec vulputate nibh arcu in velit. Vivamus in justo quis mauris feugiat sodales quis vel turpis. Donec quis bibendum elit. Suspendisse dui risus, tempus ac suscipit viverra, convallis adipiscing eros. Quisque velit urna, suscipit placerat dapibus vel, malesuada in ipsum. Nullam ut felis pulvinar ante ullamcorper facilisis at tincidunt quam. Donec quis quam et orci ullamcorper pulvinar a quis eros. Fusce quam dui, ultrices a laoreet quis, vulputate at dolor. Curabitur ac eros elit, in sagittis justo. Vivamus ullamcorper facilisis massa, vitae porttitor dui suscipit sed. Fusce tempus imperdiet orci, varius lobortis velit imperdiet sit amet.</p> </div> <div class="modalFooter"> <a href="#" class="largeInfoButton save">Got it!</a> <a href="#" class="largeButton close">Close</a> </div> </div>
The example above will result in the following modal: Inline Modal
This is a modal window built with inline content and featuring an overlay. The text below shows what happens when modal content overflows.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non magna metus. Vivamus vitae mi dui, eu accumsan leo. Vestibulum sagittis malesuada varius. Curabitur ultricies, diam interdum posuere congue, lorem eros facilisis dui, a aliquet quam erat at quam. Nunc pellentesque consectetur dolor vel venenatis. Nunc libero enim, mollis at fermentum eget, lobortis non enim. Maecenas justo augue, pharetra ut ullamcorper in, feugiat ac arcu. Duis quis augue ut libero pharetra ultricies. Vivamus vitae risus nibh. Phasellus eget aliquam ligula. Praesent malesuada, risus sit amet iaculis pretium, risus erat sagittis magna, in vestibulum libero velit a odio. Praesent est justo, ultricies id pretium vel, vehicula ut leo. Nunc et sapien non magna volutpat facilisis.
In placerat mollis lorem sit amet tincidunt. Nulla iaculis, orci et blandit lacinia, purus eros pellentesque sapien, non ornare erat elit eu risus. Nulla cursus vulputate tempus. Sed tempor ante adipiscing lorem malesuada non pretium ante malesuada. Nullam dignissim, tortor sed ornare convallis, est orci scelerisque odio, nec vulputate nibh arcu in velit. Vivamus in justo quis mauris feugiat sodales quis vel turpis. Donec quis bibendum elit. Suspendisse dui risus, tempus ac suscipit viverra, convallis adipiscing eros. Quisque velit urna, suscipit placerat dapibus vel, malesuada in ipsum. Nullam ut felis pulvinar ante ullamcorper facilisis at tincidunt quam. Donec quis quam et orci ullamcorper pulvinar a quis eros. Fusce quam dui, ultrices a laoreet quis, vulputate at dolor. Curabitur ac eros elit, in sagittis justo. Vivamus ullamcorper facilisis massa, vitae porttitor dui suscipit sed. Fusce tempus imperdiet orci, varius lobortis velit imperdiet sit amet.
AJAX content can be loaded simply by pointing the trigger to the file that will produce the content.
Note The file path must be relative without the preceding
http or else the file will be loaded in an iframe.
<a class="infoButton modalTrigger" href="../ajax/content.html">AJAX Modal</a>
The button above will result in the following modal: AJAX Modal
Content in an AJAX modal is placed in a container with an id of ajaxModal. By default,
the container has padding of 1em, however, that can easily be overridden through CSS.
All other styling is at your discretion.
To load iframe content, simply point the trigger to an external site, with a URL starting with
http.
<a class="infoButton modalTrigger" href="http://uiframework.com/">Example Modal</a>
The above results in the following modal: Iframe Modal
The iframe modal defaults to a width of 80% of the current window and a height of 500px.
Options to customize the modal can be passed through data attributes in the modal trigger.
| Option | Description | Values |
|---|---|---|
data-target |
The source of the modal content. This will overwrite the href attribute in
links and is mandatory for all triggers that are not a link. |
A URL or an id of an HTML element, of the format #contentId |
data-event |
Defines the trigger event for the modal. | click, hover, etc. - defaults to click |
data-hideOverlay |
Whether or not an overlay should be hidden. | true or false - defaults false |
data-noFx |
Whether or not the modal should be animated when triggered. | true or false - defaults false |
In some modal situations, like saving a modal form, you will want to interact with the modal
before it is closed. The Modal class has 3 separate events: modalOpened,
modalSaved, and modalClosed.
Events are only accessible for inline or AJAX-type modals. To access the event, simply
add the event
to the id of the modal container. In the case of AJAX modals, that id will be
ajaxModal.
This event is fired once the modal has been opened and loaded.
This event is fired once the modal has been saved and before it is closed. You must have a
button or element within the modal with a class of save, or
modalSaved will not be fired.
This event is fired after the modal has been saved and closed. It can be triggered either by
clicking on the overlay or clicking on an element or button within the modal with a class of
close.
The following code will catch events from the eventDemo modal.
Event Modal
$('eventDemo').addEvents({
modalOpened: function(){
$('demoTarget').empty().appendText('Modal opened...').highlight();
},
modalSaved: function(){
$('demoTarget').appendText('Modal saved...').highlight();
},
modalClosed: function(){
$('demoTarget').appendText('Modal closed...').highlight();
}
});
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.