https://cherpu99.ru/templates/corporate_response/js/multibox/overlay.js

1/**************************************************************
2
3	Script		: Overlay
4	Version		: 2.0.4
5	Authors		: Samuel Birch
6	Desc		: Covers the window with a semi-transparent layer.
7	Licence		: Open Source MIT Licence
8	Modified	: Liam Smart ([email protected]) - MooTools 1.2 upgrade
9
10**************************************************************/
11
12//start overlay class
13var Overlay = new Class({
14	
15	//implements
16	Implements: Options,
17	
18	//options
19	options:{
20		colour: '#000',//background color of overlay
21		opacity: 0.7,//opacity of overlay
22		zIndex: 100,//the z-index of the overlay (needs to lower than multiBox pop-up)
23		onClick: new Class()//make sure new class is loaded
24	},
25
26	//initialization
27	initialize: function(options){
28		//set options
29		this.setOptions(options);
30		//start building overlay
31		this.container = new Element('div', {
32			'id': 'OverlayContainer',
33			'styles': {
34				position: 'absolute',
35				left: 0,
36				top: 0,
37				width: '100%',
38				display: 'none',
39				visibility: 'hidden',
40				overflow: 'hidden',
41				zIndex: this.options.zIndex,
42				opacity: 0
43			}
44		}).inject(this.options.container,'inside');
45		
46		this.iframe = new Element('iframe', {
47			'id': 'OverlayIframe',
48			'name': 'OverlayIframe',
49			'src': 'javascript:void(0);',
50			'frameborder': 0,
51			'scrolling': 'no',
52			'styles': {
53				position: 'absolute',
54				top: 0,
55				left: 0,
56				width: '100%',
57				height: '100%',
58				filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
59				opacity: 0,
60				zIndex: 101
61			}
62		}).inject(this.container,'inside');
63		
64		this.overlay = new Element('div', {
65			'id': 'Overlay',
66			'styles': {
67				position: 'absolute',
68				left: 0,
69				top: 0,
70				width: '100%',
71				height: '100%',
72				zIndex: 102,
73				backgroundColor: this.options.colour
74			}
75		}).inject(this.container,'inside');
76		
77		this.container.addEvent('click', function(){
78			this.options.onClick();
79		}.bind(this));
80		
81		this.fade = new Fx.Morph(this.container);
82		this.position();
83		//make sure overlay is resized when browser is
84		window.addEvent('resize',this.position.bind(this));
85	},
86	
87	position: function(){
88		if(this.options.container == document.body){
89			this.container.setStyles({
90				height: window.getScrollSize().y,
91				width:  window.getScrollSize().x
92			});
93		}else{
94			var myCoords = this.options.container.getCoordinates();
95			this.container.setStyles({
96				top: myCoords.top,
97				height: myCoords.height,
98				left: myCoords.left,
99				width: myCoords.width
100			});
101		};
102	},
103	
104	show: function(){
105		this.fade.start({
106			visibility: 'visible',
107			display: 'block',
108			opacity: this.options.opacity
109		}).chain(function() {
110			visibility: 'hidden'
111		});
112	},
113	
114	hide: function(){
115		this.fade.start({
116			display: 'none',
117			opacity: 0
118		}).chain(function() {
119			visibility: 'hidden'
120		});
121	}
122	
123});
124
125function s5_resize_overlay() {
126if (document.getElementById("OverlayContainer")) {
127document.getElementById("OverlayContainer").style.height = document.body.offsetHeight + "px";
128document.getElementById("OverlayContainer").style.width = document.body.offsetWidth + "px";
129}
130}
131
132$(window).addEvent('resize',function(){s5_resize_overlay();});
133