Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.
Reveal is easy to hook up. Include the JS and CSS in your
head (both of which are included in foundation.css and foundation.js, if you use the downloaded code pack). You can either call it in the JS or include a "data-reveal-id" parameter. Here are the steps to get started:
Remember: Your modal should be at the end of the page, after any of your rows or columns.
<div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]"> <h2>Awesome. I have it.</h2> <p class="lead">Your couch. It is mine.</p> <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> <a class="close-reveal-modal">×</a> </div>
There are two ways to do call a Reveal modal. The first is to attach a handler to something (button most likely) then call Reveal:
The new hotness: just add a data-reveal-id to the object which you want to fire the modal when clicked...
<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>
This will launch the modal with the ID "myModal2" without attaching a handler or calling the plugin (since the plugin is always listening for this). You can also pass any of the parameters simply by putting a data-nameOfParameter="value" (i.e. data-animation="fade")
Closing Reveal Programmatically
You can close reveal using jQuery like so:
Out of the box, reveal supports a few different sizes, those are:
small medium large xlarge expand
Reveal comes with a nice list of helpful options, here's the rundown:
|Control how your slides transition|
|animationSpeed||300||How fast should they progress?|
|If you click background, should modal close?|
||Use our default dismiss class or make your own.|
|open||callback function that triggers 'before' the modal opens.|
|opened||callback function that triggers 'after' the modal is opened.|
|close||callback function that triggers 'before' the modal prepares to close.|
|closed||callback function that triggers 'after' the modal is closed.|
Options can be used on the "data-reveal-id" implementation too, just do it like this:
Set Sail with Magellan
Our sticky-nav plugin is easy to use and gives you exactly what you need to let people know where they are on a page.Learn about Magellan »
This is a modal.
Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of
close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.
Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.×
This is a second modal.
See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.×