Overlay

Overlay is a compact, simple overlay class which allows for maximum control over its use.

MooTools Javascript Class

/*
---
description: Overlay

authors:
  - David Walsh (http://davidwalsh.name)

license:
  - MIT-style license

requires:
  core/1.2.1: '*'

provides:
  - Overlay
...
*/

var Overlay = new Class({
	
	Implements: [Options, Events],
	
	options: {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
	},
	
	initialize: function(container, options){
		this.setOptions(options);
		this.container = document.id(container);
		if (Browser.Engine.trident && Browser.Engine.version <= 6) this.ie6 = true;
		this.overlay = new Element('div', {
			id: this.options.id,
			opacity: 0,
			styles: {
				position: (this.ie6) ? 'absolute' : 'fixed',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
			events: {
				click: function(){
					this.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay, { 
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function(){
				this.overlay.setStyles({
					width: '100%',
					height: this.container.getScrollSize().y
				});
			}.bind(this),
			onComplete: function(){
				this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
			}.bind(this)
		});
		window.addEvents({
			'resize': function(){
				this.resize();
			}.bind(this),
			'scroll': function(){
				this.scroll();
			}.bind(this)
		});
	},
	
	open: function(){
		this.fireEvent('open');
		this.tween.start(this.options.opacity);
		return this;
	},
	
	close: function(){
		this.fireEvent('close');
		this.tween.start(0);
		return this;
	},
	
	resize: function(){
		this.fireEvent('resize');
		this.overlay.setStyle('height', this.container.getScrollSize().y);
		return this;
	},
	
	scroll: function(){
		this.fireEvent('scroll');
		if (this.ie6) this.overlay.setStyle('left', window.getScroll().x);
		return this;
	}
	
});

Class: Overlay

Implements:

Options, Events

Overlay Method: constructor

Syntax:

var overlay = new Overlay(document.body);

Arguments:

1. container - (string) The ID of the container (usually document.body) which will host the overlay.
2. options - (**) The options for the Overlay instance.

Options:

• id - (string, defaults to 'overlay') - The ID of the overlay to be created.
• color - (string, defaults to '#000') - The base background color of the overlay. Keep in mind the actual screen color will change with the opacity level.
• duration - (integer, defaults to 500) - The open/close duration of the overlay.
• opacity - (float, defaults to 0.5) - The destination opacity level of the overlay.
• zIndex - (integer, defaults to 5000) - The z-index of the overlay.

Events:

onClick

• (function) Function to execute when the overlay is clicked

Signature

onClick(fn)

Example

onClick: function() {
    this.close();
}

onClose

• (function) Function to execute immediately after the close directive has been given (before the opacity fade has completed).

Signature

onClose(fn)

onHide

• (function) Function to execute when the overlay has been completely hidden (after the "close" event).

Signature

onHide(fn)

onOpen

• (function) Function to execute immediately after the open directive has been given (before the opacity fade has completed).

Signature

onOpen(fn)

onShow

• (function) Function to execute when the overlay has completed it's fade in (after the "open" event)

Signature

onShow(fn)

Feeds & Profiles

Sponsors

Tutorials & Topics

Script & Style Tweets