--- 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: ```js $(document).on('open', '[data-reveal]', function () { var modal = $(this); }); $(document).on('opened', '[data-reveal]', function () { var modal = $(this); }); $(document).on('close', '[data-reveal]', function () { var modal = $(this); }); $(document).on('closed', '[data-reveal]', function () { var modal = $(this); }); ``` ***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: