Reveal — Simple, Flexible Modal Dialogs
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.
Using Reveal
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:
Markup
Remember: your modal should be at the end of the page, after any of your rows or columns.
Calling Reveal
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...
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")
Options
Options can be used on the "data-reveal-id" implementation too, just do it like this: