Reveal is a jQuery based modal plugin.
We have a version that is styled to match our look. To use, include reveal.js and reveal.css from our shared assets host.
Standard Modal
Check out the official documentation for how to use it.
<a href="#modal" data-reveal-id="modal" class="button">Open Modal</a>
<div id="modal" class="reveal-modal">
<div class="reveal-modal-inner">
<h1>Hello, Modal.</h1>
</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
Size Variations
Add .small-reveal-modal or .large-reveal-modal to vary the width of the modal dialog.
<div id="modal" class="reveal-modal xsmall-reveal-modal">
<div class="reveal-modal-inner">Extra Small Modal</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
<div id="modal" class="reveal-modal small-reveal-modal">
<div class="reveal-modal-inner">Small Modal</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
<div id="modal" class="reveal-modal">
<div class="reveal-modal-inner">Medium Modal</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
<div id="modal" class="reveal-modal large-reveal-modal">
<div class="reveal-modal-inner">Large Modal</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
<div id="modal" class="reveal-modal xlarge-reveal-modal">
<div class="reveal-modal-inner">Extra Large Modal</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>
Modal with Integrated Header
Use a nested .reveal-modal-header to add an integrated header.
<div id="modal" class="reveal-modal small-reveal-modal">
<div class="reveal-modal-header">
<h1>Modal With Header</h1>
</div>
<div class="reveal-modal-inner">...</div>
<a class="close-reveal-modal"><i class="icon-close-sign"></i><span>Close</span></a>
</div>