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 this.

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!

Step 1: Attach Needed Files

Step 2: The Modal Markup

	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>

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...


<li class="hidden-xs"><a href="#" data-reveal-id="myModal">SEARCH <i class="fa fa-search" aria-hidden="true"></i></a></li>


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!

Original Source: