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.