Overlay

Usage

It's easy to use it. As the below code:

$(function(){
    // By default, overlay is hidden.
    var overlay = new Overlay();
});

The above code will generate an element:

<div class="overlay"></div>

Both calling the open() method and triggering the overlay.open event on the document will make the overlay element shown.

Likewise, both calling the close() method and triggering the overlay.close event on the document will make the overlay element hidden.

Custom style:

$(function(){
    var overlay = new Overlay({
        backgroundColor: '#fff',
        opacity: 0.5,
        zIndex: 999
});

Examples

• Default
• Custom style
• No effect
• Embeded
• Not respond to click
• Close on tap
• Ajax with spin
• Event and class prefix
• With the FastClick

Options

An option object can be accepted when instantiate an Overlay instance, Which includes the below properties:

• backgroundColor

  Type: StringDefault: '#000'

  Set the background-color property of the overlay element.

• closeDuration

  Type: Number (unit: ms)Default: 150

  It only works for the 'fade' effect.

• closeOnEvent

  Type: Boolean | StringDefault: 'click'

  When the event assigned by this option is triggered on the overlay element, it will be closed. When this option is set to false or empty string, none listener is bound on the overlay element.

  The former similar option closeOnClick is deprecated.

• effect

  Type: String (only 'none' or 'fade')Default: 'fade'

  At present, only 'none' and 'fade' effects are supported.

• name

  Type: StringDefault: ''

  It mainly controls the prefix of Events and Listeners. For example, if it's set to 'ajax', you can open the overlay by triggering the ajax.overlay.open event on the document. And the overlay element will be added a class named ajax-overlay.

• opacity

  Type: NumberDefault: 0.6

  Set the opacity property of the overlay element.

• openDuration

  Type: Number (unit: ms)Default: 250

  It only works for the 'fade' effect.

• parent

  Type: Element | jQuery Selector | jQuery ObjectDefault: document.body

  The overlay element will be append to this element.

• zIndex

  Type: NumberDefault: 100

  Set the z-index property of the overlay element.

API

Properties

• $el

  An jQuery/Zepto object represents the generated overlay element.

• isClosed

  Indicate the overlay whether is closed or not.

Methods

• open()

  Show the overlay.

• close()

  Hide the overlay.

• destroy()

  Remove the overlay element from the DOM and remove the listeners on document.

Events

The value of eventPrefix will be options.name + ':'.

• [eventPrefix]overlay:beforeopen

  This event will be triggered on the document before the overlay shown.

• [eventPrefix]overlay:afteropen

  This event will be triggered on the document after the overlay shown.

• [eventPrefix]overlay:beforeclose

  This event will be triggered on the document before the overlay hidden.

• [eventPrefix]overlay:afterclose

  This event will be triggered on the document after the overlay hidden.

Listeners

The value of eventPrefix will be options.name + ':'.

• [eventPrefix]overlay:open

  When this event is triggered on the document, the overlay will be shown.

• [eventPrefix]overlay:close

  When this event is triggered on the document, the overlay will be hidden.

Browser Support

The below browsers are tested:

• IE7,8,9,10,11
• Chrome
• Firefox
• iOS 8.0
• Android 4.2
• Android Chrome
• Android UC Browser
• Opera Mobile
• IE Mobile 10
• To be continue...

My goal is to support IE7+, other modern desktop browsers and mobile browsers, including Android 2.3+, iOS 5.0+, IE Mobile 10+

Note: If you're using Zepto, then the fx module must be included.

License

Under the MIT License.