--- title: Reveal Modal ---

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

{{> examples_reveal_basic}}

Rendered HTML

{{> examples_reveal_basic_rendered}}
***

Intermediate

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

HTML

{{> examples_reveal_modal_examples}}

Rendered HTML

{{> examples_reveal_modal_examples_rendered}}
***

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

{{> examples_reveal_background}}
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

{{> examples_reveal_data}} You can also open and close Reveal via Javascript: {{> examples_reveal_open_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

{{> examples_reveal_ajax}} Ajax-based Reveal modals can also be opened via Javascript:

JS

{{> examples_reveal_ajax_javascript}}

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.

```js $(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); }); ``` *** ## Accessibility

This component is not yet accessible. Stay tuned for updates in future releases.

***

Customize with Sass

Reveal modals can be easily customized using our Sass variables.

SCSS

{{> examples_reveal_variables}}

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:

{{#markdown}} ```scss .custom-reveal-class { @include reveal-bg(); } ``` {{/markdown}}

Creating the base structure

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

{{#markdown}} ```scss .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 ); } ``` {{/markdown}}

Set Reveal Base Styles

You can use this mixin to style the reveal modal defaults

{{#markdown}} ```scss .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 ); } ``` {{/markdown}}

Add a close button

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

{{#markdown}} ```scss .custom-reveal-class { @include reveal-close( $color:$reveal-close-color ); } ``` {{/markdown}} **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](../javascript.html) 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:

{{> examples_reveal_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.

{{> examples_reveal_javascript_options}}
Sass Errors?

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

SCSS

{{#markdown}} ```scss @import "foundation/components/reveal"; ``` {{/markdown}}