Foundation

Reveal

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.

Example Modal…


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.


<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">&#215;</a>
</div>
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:


<script type="text/javascript">
  $(document).ready(function() {
    $("#buttonForModal").click(function() {
      $("#myModal").reveal();
    });
  });
</script>

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:


$('#myModal').trigger('reveal:close');

Sizes

Out of the box, reveal supports a few different sizes, those are:
small medium large xlarge expand


Options

Reveal comes with a nice list of helpful options, here's the rundown:
Name Options Description
animation fade
fadeAndPop none
Control how your slides transition
animationSpeed 300 How fast should they progress?
closeOnBackgroundClick true
false
If you click background, should modal close?
dismissModalClass close-reveal-modal
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:

Name Options
data-animation fade
fadeAndPop
none
data-animationSpeed 300
data-closeOnBackgroundClick true
false
data-dismiss-modal-class close-reveal-modal

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 »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs

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.

Second Modal…

×

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.

×