Submit your widget
HomeLightbox & Dialog & OverlayEasy jQuery Modals dialog

Easy jQuery Modals dialog

Created 13 years ago   Views 28215   downloads 10899    Author zurb
Easy jQuery Modals dialog
View DemoDownload
85
Share |

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

/* Attach the Reveal CSS */
<link rel="stylesheet" href="reveal.css">
 
/* jQuery needs to be attached */
<script src="jquery.min.js" type="text/javascript"></script>
 
/* Then just attach the Reveal plugin */
<script src="jquery.reveal.js" type="text/javascript"></script>

Step 2: The Modal Markup

<div id="myModal" class="reveal-modal">
     <h1>Modal Title</h1>
     <p>Any content could go in here.</p>
     <a class="close-reveal-modal">&#215;</a>
</div>

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

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

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

/* Programmatic Launching Of Reveal */
 
<script type="text/javascript">
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').reveal();
     });
});
</script>

Options

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

$('#myModal').reveal({
     animation: 'fadeAndPop',                   //fade, fadeAndPop, none
     animationspeed: 300,                       //how fast animtions are
     closeonbackgroundclick: true,              //if you click background will modal close?
     dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
});

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

<a href="#" data-reveal-id="myModal" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal">Click for a modal</a>

The article source:http://www.zurb.com/playground/reveal-modal-plugin

You might also like