--- title: Reveal layout: doc/layouts/default.html --- # 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.

*** {{> examples_reveal_basic}} ***

Basic

You can create a reveal modal using minimal markup.

HTML

{{> examples_reveal_basic_rendered}}

Rendered HTML

{{> examples_reveal_basic}}
***

Advanced

Additional classes can be added to your reveal modal to change its appearance. The class options: * `small`: Set the width to 30%. * `medium`: Set the width to 40%. * `large`: Set the width to 60%. * `xlarge`: Set the width to 70%. * `expand`: Set the width to 95%. ##### 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:
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.


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.js` are available on your page. You can refer to the [JavaScript documentation](../JavaScript.html) on setting that up.

Just add `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}} {{> examples_reveal_modal_examples}}
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}}