https://koregos.org/Koregos/ows/js/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
52DHTML_modalMessage.prototype = {
53	// {{{ setSource(urlOfSource)
54    /**
55     *	Set source of the modal dialog box
56     * 	
57     *
58     * @public	
59     */		
60	setSource : function(urlOfSource)
61	{
62		this.url = urlOfSource;
63		
64	}	
65	// }}}	
66	,
67	// {{{ setHtmlContent(newHtmlContent)
68    /**
69     *	Setting static HTML content for the modal dialog box.
70     * 	
71     *	@param String newHtmlContent = Static HTML content of box
72     *
73     * @public	
74     */		
75	setHtmlContent : function(newHtmlContent)
76	{
77		this.htmlOfModalMessage = newHtmlContent;
78		
79	}
80	// }}}		
81	,
82	// {{{ setSize(width,height)
83    /**
84     *	Set the size of the modal dialog box
85     * 	
86     *	@param int width = width of box
87     *	@param int height = height of box
88     *
89     * @public	
90     */		
91	setSize : function(width,height)
92	{
93		if(width)this.width = width;
94		if(height)this.height = height;		
95	}
96	// }}}		
97	,		
98	// {{{ setCssClassMessageBox(newCssClass)
99    /**
100     *	Assign the message box to a new css class.(in case you wants a different appearance on one of them)
101     * 	
102     *	@param String newCssClass = Name of new css class (Pass false if you want to change back to default)
103     *
104     * @public	
105     */		
106	setCssClassMessageBox : function(newCssClass)
107	{
108		this.cssClassOfMessageBox = newCssClass;
109		if(this.divs_content){
110			if(this.cssClassOfMessageBox)
111				this.divs_content.className=this.cssClassOfMessageBox;
112			else
113				this.divs_content.className='modalDialog_contentDiv';	
114		}
115					
116	}
117	// }}}		
118	,	
119	// {{{ setShadowOffset(newShadowOffset)
120    /**
121     *	Specify the size of shadow
122     * 	
123     *	@param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
124     *
125     * @public	
126     */		
127	setShadowOffset : function(newShadowOffset)
128	{
129		this.shadowOffset = newShadowOffset
130					
131	}
132	// }}}		
133	,	
134	// {{{ display()
135    /**
136     *	Display the modal dialog box
137     * 	
138     *
139     * @public	
140     */		
141	display : function()
142	{
143		if(!this.divs_transparentDiv){
144			this.__createDivs();
145		}	
146		
147		// Redisplaying divs
148		this.divs_transparentDiv.style.display='block';
149		this.divs_content.style.display='block';
150		this.divs_shadow.style.display='block';		
151		if(this.MSIE)this.iframe.style.display='block';	
152		this.__resizeDivs();
153		
154		/* Call the __resizeDivs method twice in case the css file has changed. The first execution of this method may not catch these changes */
155		window.refToThisModalBoxObj = this;		
156		setTimeout('window.refToThisModalBoxObj.__resizeDivs()',150);

157		
158		this.__insertContent();	// Calling method which inserts content into the message div.
159	}
160	// }}}		
161	,
162	// {{{ ()
163    /**
164     *	Display the modal dialog box
165     * 	
166     *
167     * @public	
168     */		
169	setShadowDivVisible : function(visible)
170	{
171		this.shadowDivVisible = visible;
172	}
173	// }}}	
174	,
175	// {{{ close()
176    /**
177     *	Close the modal dialog box
178     * 	
179     *
180     * @public	
181     */		
182	close : function()
183	{
184		//document.documentElement.style.overflow = '';	// Setting the CSS overflow attribute of the <html> tag back to default.
185		
186		/* Hiding divs */
187		this.divs_transparentDiv.style.display='none';
188		this.divs_content.style.display='none';
189		this.divs_shadow.style.display='none';
190		if(this.MSIE)this.iframe.style.display='none';
191		
192	}	
193	// }}}	
194	,
195	// {{{ __addEvent()
196    /**
197     *	Add event
198     * 	
199     *
200     * @private	
201     */		
202	addEvent : function(whichObject,eventType,functionName,suffix)
203	{ 
204	  if(!suffix)suffix = '';
205	  if(whichObject.attachEvent){ 
206	    whichObject['e'+eventType+functionName+suffix] = functionName; 
207	    whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );} 
208	    whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] ); 
209	  } else 
210	    whichObject.addEventListener(eventType,functionName,false); 	    
211	} 
212	// }}}	
213	,
214	// {{{ __createDivs()
215    /**
216     *	Create the divs for the modal dialog box
217     * 	
218     *
219     * @private	
220     */		
221	__createDivs : function()
222	{
223		// Creating transparent div
224		this.divs_transparentDiv = document.createElement('DIV');
225		this.divs_transparentDiv.className='modalDialog_transparentDivs';
226		this.divs_transparentDiv.style.left = '0px';
227		this.divs_transparentDiv.style.top = '0px';
228		
229		document.body.appendChild(this.divs_transparentDiv);
230		// Creating content div
231		this.divs_content = document.createElement('DIV');
232		this.divs_content.className = 'modalDialog_contentDiv';
233		this.divs_content.id = 'DHTMLSuite_modalBox_contentDiv';
234		this.divs_content.style.zIndex = 100000;
235		
236		if(this.MSIE){
237			this.iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
238			this.iframe.style.zIndex = 90000;
239			this.iframe.style.position = 'absolute';
240			document.body.appendChild(this.iframe);	
241		}
242			
243		document.body.appendChild(this.divs_content);
244		// Creating shadow div
245		this.divs_shadow = document.createElement('DIV');
246		this.divs_shadow.className = 'modalDialog_contentDiv_shadow';
247		this.divs_shadow.style.zIndex = 95000;
248		document.body.appendChild(this.divs_shadow);
249		window.refToModMessage = this;
250		this.addEvent(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });
251		this.addEvent(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });
252			
253
254	}
255	// }}}
256	,
257	// {{{ __getBrowserSize()
258    /**
259     *	Get browser size
260     * 	
261     *
262     * @private	
263     */		
264	__getBrowserSize : function()
265	{
266    	var bodyWidth = document.documentElement.clientWidth;
267    	var bodyHeight = document.documentElement.clientHeight;
268    	
269		var bodyWidth, bodyHeight; 
270		if (self.innerHeight){ // all except Explorer 
271		 
272		   bodyWidth = self.innerWidth; 
273		   bodyHeight = self.innerHeight; 
274		}  else if (document.documentElement && document.documentElement.clientHeight) {
275		   // Explorer 6 Strict Mode 		 
276		   bodyWidth = document.documentElement.clientWidth; 
277		   bodyHeight = document.documentElement.clientHeight; 
278		} else if (document.body) {// other Explorers 		 
279		   bodyWidth = document.body.clientWidth; 
280		   bodyHeight = document.body.clientHeight; 
281		} 
282		return [bodyWidth,bodyHeight];		
283		
284	}
285	// }}}	
286	,
287	// {{{ __resizeDivs()
288    /**
289     *	Resize the message divs
290     * 	
291     *
292     * @private	
293     */	
294    __resizeDivs : function()
295    {
296    	
297    	var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
298
299		if(this.cssClassOfMessageBox)
300			this.divs_content.className=this.cssClassOfMessageBox;
301		else
302			this.divs_content.className='modalDialog_contentDiv';	
303			    	
304    	if(!this.divs_transparentDiv)return;
305    	
306    	// Preserve scroll position
307    	var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
308    	var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
309    	
310    	window.scrollTo(sl,st);
311    	setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);
312
313    	this.__repositionTransparentDiv();
314    	
315
316		var brSize = this.__getBrowserSize();
317		var bodyWidth = brSize[0];
318		var bodyHeight = brSize[1];
319    	
320    	// Setting width and height of content div
321      	this.divs_content.style.width = this.width + 'px';
322    	this.divs_content.style.height= this.height + 'px';  	
323    	
324    	// 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)
325    	var tmpWidth = this.divs_content.offsetWidth;	
326    	var tmpHeight = this.divs_content.offsetHeight;
327    	
328    	
329    	// Setting width and height of left transparent div
330    	
331    	
332
333    	
334    	
335		

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