http://www.origamipage.de/multibox/overlay.js

1
2/**************************************************************
3
4	Script		: Overlay
5	Version		: 1.2
6	Authors		: Samuel birch
7	Desc		: Covers the window with a semi-transparent layer.
8	Licence		: Open Source MIT Licence
9
10**************************************************************/
11
12var Overlay = new Class({
13	
14	getOptions: function(){
15		return {
16			colour: '#000',
17			opacity: 0.7,
18			zIndex: 1,
19			container: document.body,
20			onClick: Class.empty
21		};
22	},
23
24	initialize: function(options){
25		this.setOptions(this.getOptions(), options);
26		
27		this.options.container = $(this.options.container);
28		
29		this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({
30			position: 'absolute',
31			left: '0px',
32			top: '0px',
33			width: '100%',
34			//zIndex: this.options.zIndex
35            zIndex:19
36		}).injectInside(this.options.container);
37		
38		this.iframe = new Element('iframe').setProperties({
39			'id': 'OverlayIframe',
40			'name': 'OverlayIframe',
41			'src': 'javascript:void(0);',
42			'frameborder': 1,
43			'scrolling': 'no'
44		}).setStyles({
45			'position': 'absolute',
46			'top': 0,
47			'left': 0,
48			'width': '100%',
49			'height': '100%',
50			'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
51			'opacity': 0,
52			'zIndex': 1
53		}).injectInside(this.container);
54		
55		this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({
56			position: 'absolute',
57			left: '0px',
58			top: '0px',
59			width: '100%',
60			height: '100%',
61			zIndex: 2,
62			backgroundColor: this.options.colour
63		}).injectInside(this.container);
64		
65		this.container.addEvent('click', function(){
66			this.options.onClick();
67		}.bind(this));
68		
69		this.fade = new Fx.Style(this.container, 'opacity').set(0);
70		this.position();
71		
72		window.addEvent('resize', this.position.bind(this));
73	},
74	
75	position: function(){ 
76		if(this.options.container == document.body){ 
77			var h = window.getScrollHeight()+'px'; 
78			this.container.setStyles({top: '0px', height: h}); 
79		}else{ 
80			var myCoords = this.options.container.getCoordinates(); 
81			this.container.setStyles({
82				top: myCoords.top+'px', 
83				height: myCoords.height+'px', 
84				left: myCoords.left+'px', 
85				width: myCoords.width+'px'
86			}); 
87		} 
88	},
89	
90	show: function(){
91		this.fade.start(0,this.options.opacity);
92	},
93	
94	hide: function(){
95		this.fade.start(this.options.opacity,0);
96	}
97	
98});
99Overlay.implement(new Options);
100
101/*************************************************************/