Creating Reveal: jQuery Modal
Reveal is the latest modal creation of Zurb which is based on jQuery. It is lightweight, simple to use, cross-browser accessible and simply works great.
Click on the image to download the zip file.
It has three basic steps:
Step 1:
Attach needed files
/* Attach the Reveal CSS */
/* jQuery needs to be attached */ /* Then just attach the Reveal plugin */ code hosted by snipt.net
Step 2:
Modal Markup
code hosted by snipt.net
Step 3:
Attaching Handler
OR
/* Programmatic Launching Of Reveal */
<script type="text/javascript">
$(document).ready(function() {
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
});
</script>
OPTIONS:
$('#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
});
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>
0
501
