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.


Basic

You can create a reveal modal using minimal markup. The anchor tag with the reveal-modal-id is what triggers the Reveal.

HTML

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a> <div id="myModal" class="reveal-modal" data-reveal> <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>

Rendered HTML

Click Me For A Modal

Awesome. I have it.

Your couch. It is mine.

Im a cool paragraph that lives inside of an even cooler modal. Wins

×

Intermediate

You can create a reveal modal with another inside it. You can even put a video into a reveal.

HTML

<!-- Triggers the modals --> <a href="#" data-reveal-id="firstModal" class="radius button">Modal in a modal&hellip;</a> <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a> <!-- Reveal Modals begin --> <div id="firstModal" class="reveal-modal" data-reveal> <h2>This is a modal.</h2> <p>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 <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p> <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p> <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p> <a class="close-reveal-modal">&#215;</a> </div> <div id="secondModal" class="reveal-modal" data-reveal> <h2>This is a second modal.</h2> <p>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.</p> <a class="close-reveal-modal">&#215;</a> </div> <div id="videoModal" class="reveal-modal large" data-reveal> <h2>This modal has video</h2> <div class="flex-video"> <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe> </div> <a class="close-reveal-modal">&#215;</a> </div> <!-- Reveal Modals end -->

Rendered HTML

Modal in a modal… Example Modal w/Video…

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.

×

This modal has video

×


Advanced

Additional classes can be added to your reveal modal to change its appearance.

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%.
  • full: Set the width to 100%.

Note: Default on small is 100% (full) width.

Removing the Background

HTML

<div class="reveal-modal-bg" style="display: none"></div>
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.

HTML

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

You can also open and close Reveal via Javascript:

// 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');
Firing a Reveal Modal with Ajax Content

To launch a modal with content from another page, just add a data-reveal-ajax attribute pointing to the url of that page. When clicked, the Reveal modal will be opened with a content from that page. Beware: content of the object from data-reveal-id attribute will be overwritten as a result.

To use an url from href attribute just add data-reveal-ajax="true" instead.

JS

<button data-reveal-id="myModal" data-reveal-ajax="http://some-url"> Click Me For A Modal </button> <a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true"> Click Me For A Modal </a>

Ajax-based Reveal modals can also be opened via Javascript:

JS

// just an url $('#myModal').foundation('reveal', 'open', 'http://some-url'); // url with extra parameters $('#myModal').foundation('reveal', 'open', { url: 'http://some-url', data: {param1: 'value1', param2: 'value2'} }); // url with custom callbacks $('#myModal').foundation('reveal', 'open', { url: 'http://some-url', success: function(data) { alert('modal data loaded'); }, error: function() { alert('failed loading modal'); } });

Please refer to http://api.jquery.com/jQuery.ajax/ for a complete list of possible parameters.


Event Bindings

There are a series of events that you can bind to for triggering callbacks:

Deprecation Notice

Previous versions of the reveal plugin emitted un-namespaced open, opened, close and closed events, however, these have been replaced by the namespaced open.fndtn.reveal, opened.fndtn.reveal, close.fndtn.reveal and closed.fndtn.reveal events. The un-namespaced events will be fully deprecated when Foundation 5.4 is released.

$(document).on('open.fndtn.reveal', '[data-reveal]', function () { var modal = $(this); }); $(document).on('opened.fndtn.reveal', '[data-reveal]', function () { var modal = $(this); }); $(document).on('close.fndtn.reveal', '[data-reveal]', function () { var modal = $(this); }); $(document).on('closed.fndtn.reveal', '[data-reveal]', function () { var modal = $(this); });

Customize With Sass

Reveal modals can be easily customized using our Sass variables.

SCSS

$include-html-reveal-classes: $include-html-classes; /* 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: 50px; $reveal-default-width: 80%; $reveal-modal-padding: rem-calc(20); $reveal-box-shadow: 0 0 10px rgba(#000,.4); /* We use these to style the reveal close button */ $reveal-close-font-size: rem-calc(22); $reveal-close-top: rem-calc(8); $reveal-close-side: rem-calc(11); $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; $reveal-modal-class: "reveal-modal"; $close-reveal-modal-class: "close-reveal-modal";

Semantic Markup With Sass

You can create your own reveal modals using our Sass mixins.

Setting the background

You can use the reveal-bg() mixin to create your own reveal modal, like so:

.custom-reveal-class { @include reveal-bg(); }

Creating the base structure

You can use this mixin to create the structure of a reveal modal

.custom-reveal-class { @include reveal-modal-base( // Provides reveal base styles, can be set to false to override. $base-style:true, // Sets reveal width Default: $reveal-default-width or 80% $width:$reveal-default-width ); }

Set Reveal Base Styles

You can use this mixin to style the reveal modal defaults

.custom-reveal-class { @include reveal-modal-style( // Sets background color of reveal modal. Default: $reveal-modal-bg or #fff $bg:$reveal-modal-bg, // Set reveal border style. Default: $reveal-border-style or solid $border:true, // Width of border (i.e. 1px). Default: $reveal-border-width. $border-style:$reveal-border-style, // Color of border. Default: $reveal-border-color. $border-width:$reveal-border-width, // Color of border. Default: $reveal-border-color. $border-color:$reveal-border-color, // Choose whether or not to include the default box-shadow. Default: true, Options: false $box-shadow:true, // Default: $reveal-position-top or 50px $top-offset:$reveal-position-top ); }

Add a close button

You can use this mixin to create a close button for the reveal modal

.custom-reveal-class { @include reveal-close( $color:$reveal-close-color ); }

Note: rem-calc(); is a function we wrote to convert px to rem. It is included in _variables.scss.


Using the Javascript

Before you can use Reveal you'll want to verify that jQuery and foundation.min.js are available on your page. You can refer to the Javascript documentation on setting that up.

If you are not using foundation.min.js and individually adding plugins, include foundation.reveal.js AFTER the foundation.js file. Your markup should look something like this:

<body> ... <script src="js/vendor/jquery.js"></script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.reveal.js"></script> <!-- Other JS plugins can be included here --> <script> $(document).foundation(); </script> </body>

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.

{ animation: 'fadeAndPop', animation_speed: 250, close_on_background_click: true, dismiss_modal_class: 'close-reveal-modal', bg_class: 'reveal-modal-bg', root_element: 'body', bg : $('.reveal-modal-bg'), css : { open : { 'opacity': 0, 'visibility': 'visible', 'display' : 'block' }, close : { 'opacity': 1, 'visibility': 'hidden', 'display': 'none' } } }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/reveal";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »