Modal Windows


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.

Return to top


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="">Example Modal</a>
Closing Modals

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.

Loading Inline Content

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.

Styling Inline Content

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 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 class="modalFooter">
		<a href="#" class="largeInfoButton save">Got it!</a>
		<a href="#" class="largeButton close">Close</a>

The example above will result in the following modal: Inline Modal

Loading AJAX Content

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

Styling AJAX Content

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.

Loading Iframe Content

To load iframe content, simply point the trigger to an external site, with a URL starting with http.

<a class="infoButton modalTrigger" href="">Example Modal</a>

The above results in the following modal: Iframe Modal

Styling Iframe Content

The iframe modal defaults to a width of 80% of the current window and a height of 500px.

Return to top


Options to customize the modal can be passed through data attributes in the modal trigger.

Modal Options
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

Return to top


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.

Accessing Events

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.

Event: modalOpened

This event is fired once the modal has been opened and loaded.

Event: modalSaved

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.

Event: modalClosed

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.

Events Example

The following code will catch events from the eventDemo modal. Event Modal

	modalOpened: function(){
		$('demoTarget').empty().appendText('Modal opened...').highlight();
	modalSaved: function(){
		$('demoTarget').appendText('Modal saved...').highlight();
	modalClosed: function(){
		$('demoTarget').appendText('Modal closed...').highlight();

Return to top

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.