--- title: Reveal Modal layout: component.html ---

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. Setting `reveal.multiple_opened` to `true` will not close previously opened reveal modals. 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 and height 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 have been fully deprecated.

```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 fully accessible. While it is usable via the keyboard, it has to be checked if additional ARIA attributes can enhance the components accessibility.

***

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.

You can also specify an AJAX error callback with the option on_ajax_error. {{> examples_reveal_javascript_options}}
### Adding New Reveal Content After Page Load If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following: {{#markdown}} ```javascript $(document).foundation(); ``` {{/markdown}} Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them. {{#markdown}} ```javascript $(document).foundation('reveal', 'reflow'); ``` {{/markdown}} ***
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}}