jQuery Plugin To Create Flexible & Customizable Overlays

jQuery Plugin To Create Flexible & Customizable Overlays
File Size: 2.55 KB
Views Total: 882
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.