<ahref="#"data-reveal-id="myModal">Click Me For A Modal</a><divid="myModal"class="reveal-modal"data-revealaria-labelledby="modalTitle"aria-hidden="true"role="dialog"><h2id="modalTitle">Awesome. I have it.</h2><pclass="lead">Your couch.  It is mine.</p><p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p><aclass="close-reveal-modal"aria-label="Close">&#215;</a></div>

<!-- Triggers the modals --><ahref="#"data-reveal-id="firstModal"class="radius button">Modal in a modal&hellip;</a><ahref="#"data-reveal-id="videoModal"class="radius button">Example Modal with Video&hellip;</a><!-- Reveal Modals begin --><divid="firstModal"class="reveal-modal"data-revealaria-labelledby="firstModalTitle"aria-hidden="true"role="dialog"><h2id="firstModalTitle">This is a modal.</h2><p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of<code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p><p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p><p><ahref="#"data-reveal-id="secondModal"class="secondary button">Second Modal...</a></p><aclass="close-reveal-modal"aria-label="Close">&#215;</a></div><divid="secondModal"class="reveal-modal"data-revealaria-labelledby="secondModalTitle"aria-hidden="true"role="dialog"><h2id="secondModalTitle">This is a second modal.</h2><p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p><aclass="close-reveal-modal"aria-label="Close">&#215;</a></div><divid="videoModal"class="reveal-modal large"data-revealaria-labelledby="videoModalTitle"aria-hidden="true"role="dialog"><h2id="videoModalTitle">This modal has video</h2><divclass="flex-video widescreen vimeo"><iframewidth="1280"height="720"src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0"frameborder="0"allowfullscreen></iframe></div><aclass="close-reveal-modal"aria-label="Close">&#215;</a></div><!-- Reveal Modals end -->

<divclass="reveal-modal-bg"style="display: none"></div>

<ahref="#"data-reveal-id="myModal">Click Me For A Modal</a>

Please refer tohttp://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:

$(document).on('open.fndtn.reveal','[data-reveal]',function() {var modal = $(this);});$(document).on('opened.fndtn.reveal','[data-reveal]',function() {var modal = $(this);});$(document).on('close.fndtn.reveal','[data-reveal]',function() {var modal = $(this);});$(document).on('closed.fndtn.reveal','[data-reveal]',function() {var modal = $(this);});

Accessibility

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.

Customize with Sass

Reveal modals can be easily customized using our Sass variables.

SCSS

$include-html-reveal-classes: $include-html-classes;// We use these to control the style of the reveal overlay.$reveal-overlay-bg: rgba($black, .45);$reveal-overlay-bg-old: $black;// We use these to control the style of the modal itself.$reveal-modal-bg: $white;$reveal-position-top: rem-calc(100);$reveal-default-width:80%;$reveal-max-width: $row-width;$reveal-modal-padding: rem-calc(20);$reveal-box-shadow:0010px rgba($black,.4);// We use these to style the reveal close button$reveal-close-font-size: rem-calc(40);$reveal-close-top: rem-calc(8);$reveal-close-side: rem-calc(11);$reveal-close-color: $base;$reveal-close-weight: $font-weight-bold;// We use this to set the default radius used throughout the core.$reveal-radius: $global-radius;$reveal-round: $global-rounded;// We use these to control the modal border$reveal-border-style: solid;$reveal-border-width:1px;$reveal-border-color: $steel;$reveal-modal-class:"reveal-modal";$close-reveal-modal-class:"close-reveal-modal";

Semantic Markup With Sass

You can create your own reveal modals using our Sass mixins.

Setting the background

You can use thereveal-bg() mixin to create your own reveal modal, like so:

.custom-reveal-class {@include reveal-bg();}

Creating the base structure

You can use this mixin to create the structure of a reveal modal

.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  );}

Set Reveal Base Styles

You can use this mixin to style the reveal modal defaults

.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  );}

Add a close button

You can use this mixin to create a close button for the reveal modal

.custom-reveal-class {@include reveal-close(    $color:$reveal-close-color  );}

Note:rem-calc(); is a function we wrote to convertpx torem. It is included in_variables.scss.

Using the Javascript

If you are not using foundation.min.js and individually adding plugins, includefoundation.reveal.js AFTER thefoundation.js file. Your markup should look something like this:

<body>  ...<scriptsrc="js/vendor/jquery.js"></script><scriptsrc="js/foundation/foundation.js"></script><scriptsrc="js/foundation/foundation.reveal.js"></script><!-- Other JS plugins can be included here --><script>    $(document).foundation();</script></body>

Required Foundation Library:foundation.reveal.js

Optional Javascript Configuration

Reveal options can only be passed in during initialization at this time. However, you can bind to theopen,opened,close, andclosed events.

{  animation:'fadeAndPop',  animation_speed:250,  close_on_background_click:true,  dismiss_modal_class:'close-reveal-modal',  multiple_opened:false,  bg_class:'reveal-modal-bg',  root_element:'body',  on_ajax_error: $.noop,  bg : $('.reveal-modal-bg'),  css : {    open : {'opacity':0,'visibility':'visible','display' :'block'    },    close : {'opacity':1,'visibility':'hidden','display':'none'    }  }}

$(document).foundation();

$(document).foundation('reveal','reflow');

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import"foundation/components/reveal";