jQuery Plugin To Create Flexible & Customizable Overlays

A lightweight jQuery plugin used to create flexible, customizable and mobile-optimized overlays which cover a page or specified elements. Useful for modal overlay, loading overlay, and image caption overlay.

Basic Usage:

1. Load the jQuery library and jQuery overlay plugin at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/overlay.js"></script>

2. Create a basic overlay covering the whole web page using overlay.open() method.

var overlay = new Overlay();

overlay.open();

3. Custom the overlay using option objects.

var overlay = new Overlay({

// background color
backgroundColor: '#000',

// close animation duration
closeDuration: 150,
	
// click the overlay to close
closeOnClick: true,

// the animation to be executed when open the overlay
// none or fade
effect: 'fade',

// it mainly controls the prefix of Events and Listeners.
name: '',

// overlay opacity
opacity: 0.6,

// open animation duration
openDuration: 250,

// the overlay will be append to this element.
parent: document.body,

// z-index
zIndex: 100
});

overlay.open();

4. Public methods.

// open an overlay
overlay.open();

// close an overlay
overlay.close();

// destroy an overlay
overlay.destroy();

5. Events and listeners.

// triggered on the document before the overlay shown.
[eventPrefix]overlay.beforeopen


// triggered on the document after the overlay shown.
[eventPrefix]overlay.afteropen

// triggered on the document before the overlay hidden.
[eventPrefix]overlay.beforeclose

// triggered on the document after the overlay hidden.
[eventPrefix]overlay.afterclose

// triggered on the document, the overlay will be shown.
[eventPrefix]overlay.open

// triggered on the document, the overlay will be hidden.
[eventPrefix]overlay.close

Change logs:

2014-12-23

• Cancel to export the defaults & don't use event namespace

2014-11-15

• Make the overlay minimium height equal to viewport height

2014-11-14

• Support to close when tap or any other event is triggered on overlay

---

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