Super Simple jQuery Based Modal Window - Overlay.js

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

How to use it:

1. Load the jQuery overlay plugin's javascript and CSS in the web page.

<link rel="stylesheet" href="dist/overlay.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/overlay.js"></script>

2. Create the Html for a modal window.

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

3. Create a link to trigger the modal window.

<a data-overlay-trigger="demo" href="#!">Click me</a>

4. Initialize the plugin on document ready.

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

5. Hide the modal. Useful for close button within your modal window.

<a href="#!" onclick="$('.overlay#demo').trigger('hide');return false;">Close</a>

Change log:

2015-07-27

• added close button.

v1.1.0 (2015-05-28)

• update

---

This awesome jQuery plugin is developed by JoahG. For more Advanced Usages, please check the demo page or visit the official website.