<%= @page_title %>

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… Example Modal w/Video…

---

Build With HTML Classes

Reveal modals are easy to build, just make sure they live right above your closing body tag or they won't work properly. Follow the markup below to get started:

<%= code_example ' ', :html %>

The class options:

• tiny: Set the width to 30%.
• small: Set the width to 40%.
• medium: Set the width to 60%.
• large: Set the width to 70%.
• xlarge: Set the width to 95%.

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default HTML page structure.

Firing a Reveal Modal

To launch a modal, just add a data-reveal-id to the object which you want to fire the modal when clicked. The data-reveal-id needs to match the id of your reveal.

<%= code_example ' Click Me For A Modal', :html %>

You can also open and close Reveal via JavaScript:

<%= code_example " // trigger by event $('a.reveal-link').trigger('click'); $('a.close-reveal-modal').trigger('click'); // or directly on the modal $('#myModal').foundation('reveal', 'open'); $('#myModal').foundation('reveal', 'close'); ", :js %>

---

Default SCSS Variables

<%= code_example ' /* We use these to control the style of the reveal overlay. */ $reveal-overlay-bg: rgba(#000, .45); $reveal-overlay-bg-old: #000; /* We use these to control the style of the modal itself. */ $reveal-modal-bg: #fff; $reveal-position-top: emCalc(15px); $reveal-default-width: 80%; $reveal-modal-padding: emCalc(20px); $reveal-box-shadow: 0 0 10px rgba(#000,.4); /* We use these to style the reveal close button */ $reveal-close-font-size: emCalc(22px); $reveal-close-top: emCalc(8px); $reveal-close-side: emCalc(11px); $reveal-close-color: #aaa; $reveal-close-weight: bold; /* We use these to control the modal border */ $reveal-border-style: solid; $reveal-border-width: 1px; $reveal-border-color: #666;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.

---

Using the JavaScript

You don't need this JS to create reveal modals with Foundation. The only reason you'll need to include foundation.reveal.js is if you want to add the ability to close an alert. You'll also need to make sure to include zepto.js and foundation.js above the alert plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.

Read how to install Foundation JavaScript

Required Foundation Library: foundation.reveal.js

Optional JavaScript Configuration

Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events.

<%= code_example " { animation: 'fadeAndPop', animationSpeed: 250, closeOnBackgroundClick: true, dismissModalClass: 'close-reveal-modal', bgClass: 'reveal-modal-bg', open: function(){}, opened: function(){}, close: function(){}, closed: function(){}, bg : $('.reveal-modal-bg'), css : { open : { 'opacity': 0, 'visibility': 'visible', 'display' : 'block' }, close : { 'opacity': 1, 'visibility': 'hidden', 'display': 'none' } } }", :js %>