--- title: 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.
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.
This component is not yet accessible. Stay tuned for updates in future releases.
***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: