Foundation
Jump to Nav

# Reveal

JavaScript Motion UI

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.

## Basics

A modal is just an empty container, so you can put any kind of content inside it, from text to forms to video to an entire grid.

Please note that we removed the option for AJAX loaded modals in Foundation 6. We did make it very easy to implement on your own though, check out a sample in the Advanced section.

To create a modal, add the class `.reveal`, the attribute `data-reveal`, and a unique ID to a container.

    <div class="reveal" id="exampleModal1" data-reveal>
      <h1>Awesome. I Have It.</h1>
      <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>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

# Awesome. I Have It.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

You'll also need a way to open the modal. Add the attribute `data-open` to any element. The value of `data-open` should be the ID of the modal.

    <p><a data-open="exampleModal1">Click me for a modal</a></p>

Click me for a modal

You'll also need a way to close the modal from inside. By default, modals will close if clicked outside of, or if the `esc` key is pressed. However, you'll generally also want to add your own click trigger. Add the attribute `data-close` to any element within the modal to add one.

You can use our handy close button styles to do this:

    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>

## Sizing

On small screens, a modal is always 100% of the width of the screen. On medium-sized screens and larger, the width changes to 80%.

The size of a modal can be changed with these sizing classes, which are added to the modal container:

- `.tiny`: 30% wide
- `.small`: 50% wide
- `.large`: 90% wide
- `.full`: 100% width and height, defaults the `escClose` option to true, as well as creates a close button.

    <div class="tiny reveal" id="exampleModal" data-reveal>
      <!-- ... -->
    </div>

Click me for a tiny modal

OH I'M SO TIIINY

Click me for a small modal

I may be small, but I've got a big heart!

Click me for a large modal

I'm big, like bear!

## Nested Modal

It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with `data-open` inside the first modal.

    <p><a data-open="exampleModal2">Click me for a modal</a></p>

    <!-- This is the first modal -->
    <div class="reveal" id="exampleModal2" data-reveal>
      <h1>Awesome!</h1>
      <p class="lead">I have another modal inside of me!</p>
      <a class="button" data-open="exampleModal3">Click me for another modal!</a>
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <!-- This is the nested modal -->
    <div class="reveal" id="exampleModal3" data-reveal>
      <h2>ANOTHER MODAL!!!</h2>
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Click me for a modal

# Awesome!

I have another modal inside of me!

Click me for another modal!

## ANOTHER MODAL!!!

## Full-screen

A full-screen modal is 100% of the width and height of the window. Add the `.full` class to make it go.

    <p><a data-toggle="exampleModal8">Click me for a full-screen modal</a></p>

    <div class="full reveal" id="exampleModal8" data-reveal>
      <p>OH I'M SO FUUUUL</p>
      <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Click me for a full-screen modal

OH I'M SO FUUUUL

## Advanced Options

### No Overlay

To remove the overlay, add the attribute `data-overlay="false"` to the modal.

    <p><a data-toggle="exampleModal9">Click me for an overlay-lacking modal</a></p>

    <div class="reveal" id="exampleModal9" data-reveal data-overlay="false">
      <p>I feel so free!</p>
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Click me for an overlay-lacking modal

I feel so free!

### Animations

To use animations from the Motion UI library, include the `data-animation-in="someAnimationIn"` and `data-animation-out="someAnimationOut"` attributes.

    <p><a data-toggle="animatedModal10">Click me for a modal</a></p>

    <div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
      <h1>Whoa, I'm dizzy!</h1>
      <p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Click me for a modal

# Whoa, I'm dizzy!

There are many options for animating modals, check out the Motion UI library to see them all

### AJAX

To use AJAX to load your modal content, use the code snippet below.

    var $modal = $('#modal');

    $.ajax('/url')
      .done(function(resp){
        $modal.html(resp).foundation('open');
    });

## Accessibility

Modals by default are accessible through the use of various ARIA attributes. To make a modal even more accessible, designate a label to the modal by adding `aria-labelledby="exampleModalHeader11"` to the container and `id="exampleModalHeader11"` to the elment you want to designate as the label.

    <p><a data-open="exampleModal11">Click me for a modal</a></p>

    <div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" data-reveal>
      <h1 id="exampleModalHeader11">Label for the Modal!</h1>
      <p class="lead">I am even more accessible than the other modals.</p>
      <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

Click me for a modal

# Label for the Modal!

I am even more accessible than the other modals.

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$reveal-background` | Color | `$white` | Default background color of a modal.
`$reveal-width` | Number | `600px` | Default width of a modal, with no class applied.
`$reveal-max-width` | Number | `$global-width` | Default maximum width of a modal.
`$reveal-padding` | Number | `$global-padding` | Default padding inside a modal.
`$reveal-border` | Number | `1px solid $medium-gray` | Default border around a modal.
`$reveal-radius` | Number | `$global-radius` | Default radius for modal.
`$reveal-zindex` | Number | `1005` | z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
`$reveal-overlay-background` | Color | `rgba($black, 0.45)` | Background color of modal overlays.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### reveal-overlay

    @include reveal-overlay($background);

Adds styles for a modal overlay.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$background` | Color | `$reveal-overlay-background` | Background color of the overlay.

#### reveal-modal-base

    @include reveal-modal-base;

Adds base styles for a modal.

#### reveal-modal-width

    @include reveal-modal-width($width, $max-width);

Adjusts the width of a modal.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$width` | Number | `None` | Width of the modal. Generally a percentage.
`$max-width` | Number | `$reveal-max-width` | Maximum width of the modal.

#### reveal-modal-fullscreen

    @include reveal-modal-fullscreen;

Creates a full-screen modal, which stretches the full width and height of the window.

## JavaScript Reference

### Initializing

The file `foundation.reveal.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.keyboard.js`

- `foundation.util.box.js`

- `foundation.util.triggers.js`

- `foundation.util.mediaQuery.js`

- `foundation.util.motion.js`

### Foundation.Reveal

Creates a new instance of Reveal.

    var elem = new Foundation.Reveal(element, options);

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to use for the modal.
`options` | Object | optional parameters.

### Plugin Options

Use these options to customize an instance of Reveal. Plugin options can be set as individual data attributes, one combined `data-options` attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name | Type | Default | Description
--- | --- | --- | ---
`data-animation-in` | `string` | `''` | Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
`data-animation-out` | `string` | `''` | Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
`data-show-delay` | `number` | `0` | Time, in ms, to delay the opening of a modal after a click if no animation used.
`data-hide-delay` | `number` | `0` | Time, in ms, to delay the closing of a modal after a click if no animation used.
`data-close-on-click` | `boolean` | `true` | Allows a click on the body/overlay to close the modal.
`data-close-on-esc` | `boolean` | `true` | Allows the modal to close if the user presses the `ESCAPE` key.
`data-multiple-opened` | `boolean` | `false` | If true, allows multiple modals to be displayed at once.
`data-v-offset` | `number or string` | `auto` | Distance, in pixels, the modal should push down from the top of the screen.
`data-h-offset` | `number or string` | `auto` | Distance, in pixels, the modal should push in from the side of the screen.
`data-full-screen` | `boolean` | `false` | Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
`data-btm-offset-pct` | `number` | `10` | Percentage of screen height the modal should push up from the bottom of the view.
`data-overlay` | `boolean` | `true` | Allows the modal to generate an overlay div, which will cover the view when modal opens.
`data-reset-on-close` | `boolean` | `false` | Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.
`data-deep-link` | `boolean` | `false` | Allows the modal to alter the url on open/close, and allows the use of the `back` button to close modals. ALSO, allows a modal to auto-maniacally open on page load IF the hash === the modal's user-set id.
`data-append-to` | `string` | `body` | Allows the modal to append to custom div.

### Events

These events will fire from any element with a Reveal plugin attached.

Name | Description
--- | ---
`closeme.zf.reveal` | Fires immediately before the modal opens. Closes any other modals that are currently open
`open.zf.reveal` | Fires when the modal has successfully opened.
`closed.zf.reveal` | Fires when the modal is done closing.

### Methods

#### open

    $('#element').foundation('open');

Opens the modal controlled by `this.$anchor`, and closes all others by default.

Fires these events: Reveal#event:closeme Reveal#event:open

#### close

    $('#element').foundation('close');

Closes the modal.

Fires these events: Reveal#event:closed

#### toggle

    $('#element').foundation('toggle');

Toggles the open/closed state of a modal.

#### destroy

    $('#element').foundation('destroy');

Destroys an instance of a modal.