Reveal

Responsive Modal Dialogs. It's a beautiful thing.

Basic

You can create a reveal modal using minimal markup.

View Code

HTML Code

<a href="#myModal" data-reveal-id="myModal", class="radius button">My 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>I'm a cool paragraph that lives inside of an even cooler modal. Wins.</p>
  <a class="close-reveal-modal">×</a>
</div>
×

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 and height to 100%.
  • unanchored: Modal appears near center of screen on medium sized screens and up.
  • freeze: Prevents the modal from moving as the page is scrolled. With the light class this will vertically center the items.

Here is a modal that uses the unanchored and freeze classes. Notice the use of the fix-content div. This is how we handle scrolling content when the modal is frozen.

View Code

HTML Code

<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal unanchored freeze" data-reveal>
  <div class="fix-content">
    <h2>Awesome. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins.</p>
  </div>
  <a class="close-reveal-modal">×</a>
</div>
×

The background element is appended to the end of the body element. If you would like to override this functionality you can add your own Reveal background anywhere on the page.

<div class="reveal-modal-bg" style="display: none"></div>

Light Version

You can create a light reveal modal using minimal markup. The reveal-content wrap will cause the zoom effect and create a max-width of 512px

For a black version of the light format use the class space-black

reveal-content has the class options:

  • large: Increase the max-width to 1024px.
  • full-width: Remove the max-width and fill the full width of the modal.

View Code

HTML Code

<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal light freeze" data-reveal>
  <div class="reveal-content" data-reveal>
    <h2>Awesome. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins.</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>
×

View Space Black Code

HTML Code

<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal space-black freeze" data-reveal>
  <div class="reveal-content" data-reveal>
    <h2>Awesome. I have it.</h2>
    <p class="lead">Your couch. It is mine.</p>
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins.</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>
×

Instantiating A Reveal Modal

To instantiate 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.

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

Use Reveal Events

You can use JavaScript for opening and closing the modal window.

// 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, that 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.

<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:

// 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:

$(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); });

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.

Third Modal

×

Third 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

×