🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Overlay.js is a minimalist jQuery plugin used to popup a responsive & CSS3 animated modal window with a fullscreen overlay.

Modal popup Overlay

Documentation

overlay.js

zero-config overlay/modal server.


#Configuration

To initialize overlay.js, simply include the overlay.js css and js files. If you prefer a jQuery plugin, include jQuery as well. Otherwise, Overlay.js will expose a global object.

    <head>         <script src="http://code.jquery.com/jquery-latest.min.js"></script>         <script src="path/to/overlay.js"></script>          <link rel="stylesheet" href="path/to/overlay.css">     </head>

then add the HTML to the top of your <body>:

    <div class="overlay">       <div class="modal">         <h1>Hello World</h1>         <p>This is a modal.</p>       </div>     </div>

#Usage

##Initialize

###Vanilla javascript

    function ready(fn) {         if (document.readyState != 'loading')             fn();         else             document.addEventListener('DOMContentLoaded', fn);         }          ready(function(){         window.Overlay.init();     });

##jQuery

Call the .overlay() jQuery method on your overlay (in this case .overlay):

    $(document).ready(function() {       $('.overlay').overlay();     });

##Add a trigger

To add a trigger to show your overlay, simply add a data-overlay-trigger attribute to an anchor (<a>) in your page:

    <a href="#!" data-overlay-trigger>I'm a trigger</a>

##Add a close button

To add a close button, simply add a data-overlay-close.

    <a href="#!" data-overlay-close>Close the overlay</a>

##Named Modals

If you need multiple overlays on a page, give each one a unique id, then pass that id to the trigger and close.

    <a href="#!" data-overlay-trigger="custom-modal">Open my custom modal!</a>          <div class="overlay">       <div class="modal">         <h1>Hello World</h1>         <p>This is a modal.</p>         <a href="#!" data-overlay-close="custom-modal">I'm done reading this overlay, close it!</a>       </div>     </div>

That's it! you now have a fully functional overlay/modal combination!

##Author

overlay.js is written and maintained by Joah Gerstenberg, copyright 2014.


You May Also Like