--- title: Reveal Modal layout: component.html ---
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 have been fully deprecated.
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.
***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.
You can also specify an AJAX error callback with the option on_ajax_error. {{> examples_reveal_javascript_options}}If the default "foundation" import was commented out, then make sure you import this file: