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