https://fundacionfedericoengels.net/templates/shape5_vertex/js/multibox/overlay.js

1if(undefined == Function.prototype.bind){
2	Function.prototype.bind=function(that){
3		var self = this,
4			args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
5			F = function(){};
6
7		var bound = function(){
8			var context = that, length = arguments.length;
9			if (this instanceof bound){
10				F.prototype = self.prototype;
11				context = new F;
12			}
13			var result = (!args && !length)
14				? self.call(context)
15				: self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
16			return context == that ? result : context;
17		};
18		return bound;
19	}
20}
21
22/**************************************************************
23
24	Script		: Overlay
25	Version		: 2.0.4
26	Authors		: Samuel Birch
27	Desc		: Covers the window with a semi-transparent layer.
28	Licence		: Open Source MIT Licence
29	Modified	: Liam Smart ([email protected]) - MooTools 1.2 upgrade
30
31**************************************************************/
32(function($){
33//start overlay class
34	window.Overlay = function(options){
35		//options
36		this.options=$.extend({
37			colour: '#000',//background color of overlay
38			opacity: 0.7,//opacity of overlay
39			zIndex: -1,//the z-index of the overlay (needs to lower than multiBox pop-up)
40			onClick: function(){}//make sure new class is loaded
41		},options);
42		
43		//start building overlay
44		this.container=$('<div id="OverlayContainer"></div>').css({
45			'position':'absolute','left':0,'height':'100%',
46			'top':0,'width':'100%','opacity':0,
47			'overflow':'hidden','background':'black',
48			'zIndex':this.options.zIndex,'opacity':0
49		}).appendTo(this.options.container).click(this.options.onClick);
50	}
51
52	//initialization
53	Overlay.prototype.initialize=function(options){
54		this.container.css('zIndex',100);
55		//set options
56		this.options=$.extend($this.options,options);
57		this.iframe=$('<iframe id="OverlayIframe" name="OverlayIframe" src="javascript:void(0)" frameborder=0 scrolling="no"></iframe>').css(
58			{'position':'asbolute','top':0,'left':0,'width':'100%','height':'100%',
59				'filter':'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
60				'opacity':0,'zIndex':101
61			}).appendTo(this.container);
62
63		
64		this.overlay = $('<div id="Overlay"></div>').css({
65			'position':'asbolute','top':0,'left':0,'width':'100%','height':'100%','zIndex':102,'backgroundColor':this.options.colour
66			}).appendTo(this.container);
67		
68		this.container.addEvent('click', $.proxy(function(){
69			this.options.onClick();
70		},this));
71		
72		this.position();
73		//make sure overlay is resized when browser is
74		$(window).addEvent('resize',$.proxy(this.position,this));
75	},
76	
77	Overlay.prototype.position=function(){
78		if(this.options.container == document.body){
79			this.container.setStyles({
80				height: $(window).scrollTop(),
81				width:  $(window).scrollLeft()
82			});
83		}else{
84			this.container.setStyles({
85				top: this.options.container.offset().top,
86				height: this.options.container.height(),
87				left: this.options.container.offset().left,
88				width: this.options.container.width()
89			});
90		}
91	};
92	
93	Overlay.prototype.show= function(){
94		this.container.css({'zIndex':100,'visibility':'visible'});
95	//	console.log(this.container);
96	
97		jQuery('#s5_body_padding').addClass('s5_blurred');
98		
99	
100		this.container.animate({
101			'opacity': this.options.opacity
102		},'slow','easeOutExpo',(function(){
103			//this.container.css({'visibility': 'visible'});
104		}).bind(this));
105	};
106	
107	Overlay.prototype.hide= function(){
108	
109		jQuery('#s5_body_padding').removeClass('s5_blurred');
110	
111		
112		this.container.animate({
113			display: 'none',
114			opacity: 0
115		},'slow','easeOutExpo',(function() {
116			this.container.css({'visibility': 'hidden'});
117			this.container.css('zIndex',-1);
118		}).bind(this));
119		
120	};
121})(jQuery);
122
123function s5_resize_overlay() {
124if (document.getElementById("OverlayContainer")) {
125document.getElementById("OverlayContainer").style.height = document.body.offsetHeight + "px";
126document.getElementById("OverlayContainer").style.width = document.body.offsetWidth + "px";
127}
128}
129
130jQuery(window).bind('resize',function(){s5_resize_overlay();});