[Retired-jQuery] A Plugin For Lightweight, Flexible, and Customizable Overlays. This plugin is no longer maintained.
JavaScript Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
js Fix: position of overlay for absolute positioned elements & fixed tes… Mar 28, 2012
MIT-License.txt Initial commit Jun 20, 2011
index.html Added functionality to use custom overlayClass Jan 30, 2012


jQuery Simple Overlay
Tom McFarlin, http://tommcfarlin.com, @moretom


Simple Overlay is a jQuery plugin for easily including full screen overlays
in your projects. 

It features a variety of configuration options for incorporating multiple
overlays, custom styles, glossy effect, callbacks, and more.

You can apply styles to the element that triggers the overlay using the
'overlay-trigger' class name. The overlay itself given a class name of



color         string
Specifies the hexidecimal or literal value for the color of the overlay.
Defaults to black.

opacity       number
The level of transparency for the overlay. Ranges from 0 to 1.0.
Defaults to 0.5.

effect        string
Dictates how the overlay is displayed and hidden. Can be either none,
fade, or slide.
Defaults to none.

onShow        function
The function called once the overlay is displayed.
Defaults to null.

onHide        function
The function called once the overlay is hidden.
Defaults to null.

closeOnClick  boolean
Dictates whether or not the overlay is closed when it's clicked.
Defaults to false.

glossy        boolean
Specifies whether or not a glossy effect is applied to the overy.
Defaults to false

container     string
The element to which the overlay is applied. Should be an ID.
Defaults to body.



Display a semi-transparent red overlay when the first anchor on the
page has been clicked. Display an alert dialog and close the overlay
when it has been clicked.

  $('a:first').overlay(function(evt) {
      color: 'red',
      closeOnClick: true,
      onShow: function() {
        alert('Hello world!');

Fade a semi-transparent black, glossy overlay into view once the element
having the ID of #trigger has been clicked.

  $('#trigger').click(function() {
      effect: 'fade',
      glossy: true

Append a new element to the DOM once the default overlay has been

  $('#trigger').click(function() {
      onShow: function() {
          $('<div id="new-element">This is my new element!</div>');



Web:      http://tommcfarlin.com
Twitter:  @moretom
Email:    tom@tommcfarlin.com


MIT license: