--- title: Reveal ---
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.
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.
Reveal modals can be easily customized using our Sass variables.
You can create your own reveal modals using our Sass mixins.
You can use the `reveal-bg()` mixin to create your own reveal modal, like so:
{{#markdown}} ```scss .custom-reveal-class { @include reveal-bg(); } ``` {{/markdown}}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}}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}}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**. ***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`
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}}If the default "foundation" import was commented out, then make sure you import this file: