reveal: jQuery modal for HTML5 and data attributes

The Zurb team has long pushed the envelope of CSS3. Now they’ve released a simple plugin for jQuery that uses HTML5 data attributes to wire up links to modal dialogs. To use, you’ll need jQuery, the plugin, and the base CSS:

<link rel="stylesheet" href="reveal.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.reveal.js" type="text/javascript"></script>

To create a dialog, just create a <div> with a reveal-modal class and an ID:

<div id="theModal" class="reveal-modal">
    <h1>Listen to the Changelog</h1>
    <p class="lead">The Changelog is hands-down the best Open Source podcast on the interwebs.</p>
    <a class="close-reveal-modal">×</a>
</div>

Now, we just need a link or button to open the dialog, wiring up via the data-reveal-id attribute:

<a href="#" data-reveal-id="theModal">What's the greatest tech podcast?</a>

Reveal also supports advanced options such as animation, animation speed, and close button behavior, specified in additional data-* attributes:

<a href="#" data-reveal-id="theModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">What's the greatest tech podcast?</a>

If you like Reveal, be sure and check out Orbit, a slick jQuery content slider plugin.

[Source on GitHub] [Reveal project page]