article:
JS Plugin: SuperBox
article:
Website: Coming Soon Page (PSD)

JS Plugin: Reveal Plugin For Modals

Advertisement

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


Plugin: Reveal Plugin For Modals


"Reveal is a jQuery plugin for dead simple modals that comes with some sexy base CSS and can be implemented programatically or with the new HTML5 custom data attributes (data-attribute)."



Demo

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>

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>

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

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

About option
$('#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
});

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



Features

- Callable method for closing a modal
- Have close button close "all active modals" (if multiple modals are somehow surfaced)
- Keyboard close with esc key
- Document easy way to AJAX modal content
- Add lightbox feature to make it easy to hookup custom data attributes to a lightbox functionality
- Fix IE background to have opacity



source
github
download

Advertisement
Tags: plugin, modal, jquery, develop, layout, web, internet

Leave a Comment

No Comment

© Creative3x Ltd.