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!
Step 1: Attach Needed Files
Clearly you need the Reveal kit to do this though so make sure you download it.
Step 2: The Modal Markup
Just give your modal div the class "reveal-modal"and a unique ID (we'll use the ID to launch this modal). Also, the anchor with the "close-reveal-modal" class gives a button to close the modal (although by default clicking the faded black background will also close the modal). Placing the markup just before your close body tag is usually the best place for it.
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!
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 KitDemo 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 ModalNow 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.
Reveal Modal Goodness
This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.
This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.
×