Reveal: jQuery Modals Made Easy

Setting up Reveal modals is only three easy steps. Attach the needed files, drop in your modal markup then add an attribute to your button.

Reveal is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it's fast, sexy and just works. Now let's see how easy is can be to get Reveal working!

Reveal is now part of Foundation!

Yeti

This version of Reveal has been depreciated. However, Reveal lives on in our responsive framework Foundation, along with all of our other awesome jQuery plugins, including Orbit, Joyride, and more.

Visit Foundation

Step 1: Attach Needed Files

Step 2: The Modal Markup

Step 3: Attaching Your Handler

By putting the "data-reveal-id" attribute on the anchor, when clicked the plugin matches the value of the "data-reveal-id" attribute (in this case "myModal") with an HTML element with that ID.

Basically, put the "data-reveal-id" attribute on an object and make it's value the ID of your modal.

While the "data-reveal-id" is an awesome way to make firing a modal stupid-easy, in many cases developers will still need to be fired programatically. That's easy enough too...

Options

Every good plugin has options, and this one has just a few, but important ones:

Wondering how to use the options when you're using the "data-reveal-id" implementation? Basically take the option and add the "data-" before and pass a valid value. Here is it with default values:

The Reveal plugin is licensed to use and abuse under the MIT license. Ballin!

Score an awesome product engineering or design job

via Job Board from ZURB

Download

The Reveal Kit includes the necessary JS + CSS, but also a demo HTML page that shows off how to hookup reveal in a couple different ways using different parameters.

Download the Reveal Kit

Demo The Modal

Reveal has a few awesome options, but the default modal is really quite sexy all by itself. Go ahead and give it a try.

Fire A Reveal Modal

Now On GitHub

We have put Reveal on GitHub to make handling code maintenance and issue tracking easier. Please log issues through GitHub henceforth :)

Thoughts

Jump over to the blog post about Reveal to see what others are saying or to let us know what you think of the plugin.