https://www.katolik.pl/js/popup/modal-message.js

1/************************************************************************************************************
2*	DHTML modal dialog box
3*
4*	Created:						August, 26th, 2006
5*	@class Purpose of class:		Display a modal dialog box on the screen.
6*
7*	Css files used by this script:	modal-message.css
8*
9*	Demos of this class:			demo-modal-message-1.html
10*
11* 	Update log:
12*
13************************************************************************************************************/
14
15
16/**
17* @constructor
18*/
19
20DHTML_modalMessage = function()
21{
22	var url;								// url of modal message
23	var htmlOfModalMessage;					// html of modal message
24
25	var divs_transparentDiv;				// Transparent div covering page content
26	var divs_content;						// Modal message div.
27	var iframe;								// Iframe used in ie
28	var layoutCss;							// Name of css file;
29	var width;								// Width of message box
30	var height;								// Height of message box
31
32	var existingBodyOverFlowStyle;			// Existing body overflow css
33	var dynContentObj;						// Reference to dynamic content object
34	var cssClassOfMessageBox;				// Alternative css class of message box - in case you want a different appearance on one of them
35	var shadowDivVisible;					// Shadow div visible ?
36	var shadowOffset; 						// X and Y offset of shadow(pixels from content box)
37	var MSIE;
38
39	this.url = '';							// Default url is blank
40	this.htmlOfModalMessage = '';			// Default message is blank
41	this.layoutCss = 'modal-message.css';	// Default CSS file
42	this.height = 200;						// Default height of modal message
43	this.width = 400;						// Default width of modal message
44	this.cssClassOfMessageBox = false;		// Default alternative css class for the message box
45	this.shadowDivVisible = true;			// Shadow div is visible by default
46	this.shadowOffset = 5;					// Default shadow offset.
47	this.MSIE = false;
48	if(navigator.userAgent.indexOf('MSIE')>=0) this.MSIE = true;
49
50
51}
52
53DHTML_modalMessage.prototype = {
54	// {{{ setSource(urlOfSource)
55    /**
56     *	Set source of the modal dialog box
57     *
58     *
59     * @public
60     */
61	setSource : function(urlOfSource)
62	{
63		this.url = urlOfSource;
64
65	}
66	// }}}
67	,
68	// {{{ setHtmlContent(newHtmlContent)
69    /**
70     *	Setting static HTML content for the modal dialog box.
71     *
72     *	@param String newHtmlContent = Static HTML content of box
73     *
74     * @public
75     */
76	setHtmlContent : function(newHtmlContent)
77	{
78		this.htmlOfModalMessage = newHtmlContent;
79
80	}
81	// }}}
82	,
83	// {{{ setSize(width,height)
84    /**
85     *	Set the size of the modal dialog box
86     *
87     *	@param int width = width of box
88     *	@param int height = height of box
89     *
90     * @public
91     */
92	setSize : function(width,height)
93	{
94		if(width)this.width = width;
95		if(height)this.height = height;
96	}
97	// }}}
98	,
99	// {{{ setCssClassMessageBox(newCssClass)
100    /**
101     *	Assign the message box to a new css class.(in case you wants a different appearance on one of them)
102     *
103     *	@param String newCssClass = Name of new css class (Pass false if you want to change back to default)
104     *
105     * @public
106     */
107	setCssClassMessageBox : function(newCssClass)
108	{
109		this.cssClassOfMessageBox = newCssClass;
110		if(this.divs_content){
111			if(this.cssClassOfMessageBox)
112				this.divs_content.className=this.cssClassOfMessageBox;
113			else
114				this.divs_content.className='modalDialog_contentDiv';
115		}
116
117	}
118	// }}}
119	,
120	// {{{ setShadowOffset(newShadowOffset)
121    /**
122     *	Specify the size of shadow
123     *
124     *	@param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
125     *
126     * @public
127     */
128	setShadowOffset : function(newShadowOffset)
129	{
130		this.shadowOffset = newShadowOffset
131
132	}
133	// }}}
134	,
135	// {{{ display()
136    /**
137     *	Display the modal dialog box
138     *
139     *
140     * @public
141     */
142	display : function()
143	{
144		if(!this.divs_transparentDiv){
145			this.__createDivs();
146		}
147
148		// Redisplaying divs
149		this.divs_transparentDiv.style.display='block';
150		this.divs_content.style.display='block';
151		this.divs_shadow.style.display='block';
152		if(this.MSIE)this.iframe.style.display='block';
153		this.__resizeDivs();
154
155		/* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */
156		window.refToThisModalBoxObj = this;
157		setTimeout('window.refToThisModalBoxObj.__resizeDivs()',150);
158
159		this.__insertContent();	// Calling method which inserts content into the message div.
160	}
161	// }}}
162	,
163	// {{{ ()
164    /**
165     *	Display the modal dialog box
166     *
167     *
168     * @public
169     */
170	setShadowDivVisible : function(visible)
171	{
172		this.shadowDivVisible = visible;
173	}
174	// }}}
175	,
176	// {{{ close()
177    /**
178     *	Close the modal dialog box
179     *
180     *
181     * @public
182     */
183	close : function()
184	{
185		//document.documentElement.style.overflow = '';	// Setting the CSS overflow attribute of the <html> tag back to default.
186
187		/* Hiding divs */
188		this.divs_transparentDiv.style.display='none';
189		this.divs_content.style.display='none';
190		this.divs_shadow.style.display='none';
191		if(this.MSIE)this.iframe.style.display='none';
192
193	}
194	// }}}
195	,
196	// {{{ __addEvent()
197    /**
198     *	Add event
199     *
200     *
201     * @private
202     */
203	addEvent : function(whichObject,eventType,functionName,suffix)
204	{
205	  if(!suffix)suffix = '';
206	  if(whichObject.attachEvent){
207	    whichObject['e'+eventType+functionName+suffix] = functionName;
208	    whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );}
209	    whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] );
210	  } else
211	    whichObject.addEventListener(eventType,functionName,false);
212	}
213	// }}}
214	,
215	// {{{ __createDivs()
216    /**
217     *	Create the divs for the modal dialog box
218     *
219     *
220     * @private
221     */
222	__createDivs : function()
223	{
224		// Creating transparent div
225		this.divs_transparentDiv = document.createElement('DIV');
226		this.divs_transparentDiv.className='modalDialog_transparentDivs';
227		this.divs_transparentDiv.style.left = '0px';
228		this.divs_transparentDiv.style.top = '0px';
229
230		document.body.appendChild(this.divs_transparentDiv);
231		// Creating content div
232		this.divs_content = document.createElement('DIV');
233		this.divs_content.className = 'modalDialog_contentDiv';
234		this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';
235		this.divs_content.style.zIndex = 100000;
236
237		if(this.MSIE){
238			this.iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
239			this.iframe.style.zIndex = 90000;
240			this.iframe.style.position = 'absolute';
241			document.body.appendChild(this.iframe);
242		}
243
244		document.body.appendChild(this.divs_content);
245		// Creating shadow div
246		this.divs_shadow = document.createElement('DIV');
247		this.divs_shadow.className = 'modalDialog_contentDiv_shadow';
248		this.divs_shadow.style.zIndex = 95000;
249		document.body.appendChild(this.divs_shadow);
250		window.refToModMessage = this;
251		this.addEvent(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });
252		this.addEvent(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });
253
254
255	}
256	// }}}
257	,
258	// {{{ __getBrowserSize()
259    /**
260     *	Get browser size
261     *
262     *
263     * @private
264     */
265	__getBrowserSize : function()
266	{
267    	var bodyWidth = document.documentElement.clientWidth;
268    	var bodyHeight = document.documentElement.clientHeight;
269
270		var bodyWidth, bodyHeight;

271		if (self.innerHeight){ // all except Explorer
272
273		   bodyWidth = self.innerWidth;
274		   bodyHeight = self.innerHeight;
275		}  else if (document.documentElement && document.documentElement.clientHeight) {
276		   // Explorer 6 Strict Mode
277		   bodyWidth = document.documentElement.clientWidth;
278		   bodyHeight = document.documentElement.clientHeight;
279		} else if (document.body) {// other Explorers
280		   bodyWidth = document.body.clientWidth;
281		   bodyHeight = document.body.clientHeight;
282		}
283		return [bodyWidth,bodyHeight];
284
285	}
286	// }}}
287	,
288	// {{{ __resizeDivs()
289    /**
290     *	Resize the message divs
291     *
292     *
293     * @private
294     */
295    __resizeDivs : function()
296    {
297
298    	var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
299
300		if(this.cssClassOfMessageBox)
301			this.divs_content.className=this.cssClassOfMessageBox;
302		else
303			this.divs_content.className='modalDialog_contentDiv';
304
305    	if(!this.divs_transparentDiv)return;
306
307    	// Preserve scroll position
308    	var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
309    	var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
310
311    	window.scrollTo(sl,st);
312    	setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);
313
314    	this.__repositionTransparentDiv();
315
316
317		var brSize = this.__getBrowserSize();
318		var bodyWidth = brSize[0];
319		var bodyHeight = brSize[1];
320
321    	// Setting width and height of content div
322      	this.divs_content.style.width = this.width + 'px';
323    	this.divs_content.style.height= this.height + 'px';
324
325    	// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
326    	var tmpWidth = this.divs_content.offsetWidth;
327    	var tmpHeight = this.divs_content.offsetHeight;
328
329
330    	// Setting width and height of left transparent div
331
332
333
334
335
336

337    	this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';;
338    	this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) +  topOffset) + 'px';
339        //	this.divs_content.style.top = 180 + 'px';
340
341
342
343 		if(this.MSIE){
344 			this.iframe.style.left = this.divs_content.style.left;
345 			this.iframe.style.top = this.divs_content.style.top;
346 			this.iframe.style.width = this.divs_content.style.width;
347 			this.iframe.style.height = this.divs_content.style.height;
348 		}
349
350    	this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';
351    	this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';
352    	this.divs_shadow.style.height = tmpHeight + 'px';
353    	this.divs_shadow.style.width = tmpWidth + 'px';
354
355
356
357    	if(!this.shadowDivVisible)this.divs_shadow.style.display='none';	// Hiding shadow if it has been disabled
358
359
360    }
361    // }}}
362    ,
363	// {{{ __insertContent()
364    /**
365     *	Insert content into the content div
366     *
367     *
368     * @private
369     */
370    __repositionTransparentDiv : function()
371    {
372    	this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + 'px';
373    	this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + 'px';
374		var brSize = this.__getBrowserSize();
375		var bodyWidth = brSize[0];
376		var bodyHeight = brSize[1];
377    	this.divs_transparentDiv.style.width = bodyWidth + 'px';
378    	this.divs_transparentDiv.style.height = bodyHeight + 'px';
379
380    }
381	// }}}
382	,
383	// {{{ __insertContent()
384    /**
385     *	Insert content into the content div
386     *
387     *
388     * @private
389     */
390    __insertContent : function()
391    {
392		if(this.url){	// url specified - load content dynamically
393			ajax_loadContent('DHTMLSuite_modalBox_contentDiv',this.url);
394		}else{	// no url set, put static content inside the message box
395			this.divs_content.innerHTML = this.htmlOfModalMessage;
396		}
397    }
398}