http://www.bisound.com/modal.js

1/**
2 * @Ertong
3 */
4function $$(id) {return document.getElementById(id);}
5
6function investigate(target)
7{
8	var s="<table>";
9	var i;
10	for (i in target)
11	{
12		try	{ s+='<tr><td>'+i+'</td><td>'+target[i]+'</td></tr>\n';	}
13		catch(e)
14		{ s+='<tr><td>'+i+'</td><td>not available</td></tr>\n';	}
15	}
16	s+='</table>'
17	document.write(s);
18	//alert(s);
19};
20
21function addEvent(obj, evType, fn)
22{
23	if (obj.addEventListener)
24	{
25		obj.addEventListener(evType, fn, false);
26		return true;
27	}
28	else if (obj.attachEvent)
29		return obj.attachEvent("on"+evType, fn);
30	else
31		return false;
32}
33
34/*
35	Incapsulates some operations with HTML elements
36	Author: Ertong([email protected])
37	Web: ert.org.ua
38*/
39var ElemUtils={
40	isVisible: function(elem)
41	{
42		if (!elem) return false;
43		while (elem)
44		{
45			if (elem.style && (elem.style.visibility=='hidden' || elem.style.visibility=='none' || elem.style.display=='none')) return false;
46			elem=elem.parentNode;
47		}
48		return true;
49	},
50
51	switchVisible: function(enable, tag)
52	{
53		var objs=document.getElementsByTagName(tag);
54		for (i=0;i<objs.length; ++i)
55		{
56			if (!objs[i].style) continue;
57
58			if (enable)
59			{
60				if (objs[i]._disabled_display)
61				{
62					--objs[i]._disabled_display;
63					if (!objs[i]._disabled_display)
64						objs[i].style.visibility='visible';
65				}
66			}
67			else
68			{
69				if (objs[i]._disabled_display)
70					++objs[i]._disabled_display;
71				else if (this.isVisible(objs[i]) && !objs[i].disabled)
72				{
73					objs[i]._disabled_display=1;
74					objs[i].style.visibility='hidden';
75				}
76			}
77		}
78	},
79
80	switchInput: function(enable, tag)
81	{
82		objs=document.getElementsByTagName(tag);
83		for (i=0;i<objs.length; ++i)
84		{
85			if (!objs[i].style) continue;
86
87			if (enable)
88			{
89				if (objs[i]._disabled_display)
90				{
91					--objs[i]._disabled_display;
92					if (!objs[i]._disabled_display)
93						{
94							objs[i].disabled=false;
95							if (objs[i].switch_href) objs[i].href=objs[i].switch_href;
96						}
97				}
98			}
99			else
100			{
101				if (objs[i]._disabled_display)
102					++objs[i]._disabled_display;
103				else if (!objs[i].disabled && objs[i].type!='hidden' && ElemUtils.isVisible(objs[i]))
104				{
105					objs[i]._disabled_display=1;
106					objs[i].disabled=true;
107					if (objs[i].href) {objs[i].switch_href=objs[i].href; objs[i].href='javascript:;';}
108				}
109			}
110		}
111	},
112
113	switchActiveElements: function(enable)
114	{
115		this.switchInput(enable,'input');
116		this.switchInput(enable,'textarea');
117		this.switchInput(enable,'button');
118//		this.switchInput(enable,'a');
119		this.switchVisible(enable,'select');
120	},
121
122	getZIndex: function (elem)
123	{
124		if (typeof(elem)!='object' || !elem.style) return 0;
125
126		var cStyle = null;
127		if (elem.currentStyle) cStyle = elem.currentStyle;
128		else if (document.defaultView && document.defaultView.getComputedStyle)
129			cStyle = document.defaultView.getComputedStyle(elem,"");
130
131		var res = Number (cStyle ? cStyle.zIndex : elem.style.zIndex);
132		return res;
133	},
134
135	getMaxZIndex: function (parent)
136	{
137		parent=parent || document.body;
138		if (!parent.childNodes) return 0;
139		var res = 0;
140		var all = parent.childNodes;
141		for(var i=0; i<all.length; i++)
142		{
143			var ind=this.getZIndex(all[i]);
144			if (isNaN(ind))	ind=0;//this.getMaxZIndex(all[i]);
145
146			res = Math.max(res, ind);
147		}
148		return res;
149	},
150
151	getDimensions: function (obj)
152	{
153		var display = obj.style.display;
154		if (display != 'none' && display != null) // Safari bug
155			return {width: obj.offsetWidth, height: obj.offsetHeight};
156
157		// All *Width and *Height properties give 0 on objs with display none,
158		// so enable the obj temporarily
159		var els = obj.style;
160		var oriVisibility = els.visibility;
161		var oriPosition = els.position;
162		var oriDisplay = els.display;
163		els.visibility = 'hidden';
164		els.position = 'absolute';
165		els.display = 'block';
166		var oriWidth = obj.clientWidth;
167		var oriHeight = obj.clientHeight;
168		els.display = oriDisplay;
169		els.position = oriPosition;
170		els.visibility = oriVisibility;
171
172		return {width: oriWidth, height: oriHeight};
173	},
174	getHeight: function (obj)
175	{
176		return this.getDimensions(obj).height;
177	},
178	getWidth: function (obj)
179	{
180		return this.getDimensions(obj).width;
181	},
182	getPosition: function (obj)
183	{
184		var left = top = 0;
185		if (obj.offsetParent) {
186			left = obj.offsetLeft
187			top = obj.offsetTop
188			while (obj = obj.offsetParent) {
189				left += obj.offsetLeft
190				top += obj.offsetTop
191			}
192		}
193		return {x:left, y:top};
194	},
195	getInnerText: function (obj)
196	{
197		if (obj.textContent) return obj.textContent;
198		else if (obj.innerText)	return obj.innerText;
199		else return '';
200	},
201	resetFocus: function()
202	{ //sometimes, when the focused element become hidden, focus remains on it
203	 // then use this function
204	 	if (window.opera) document.createElement('input').focus();
205	}
206};
207
208/*
209	Implements ability to use something like modal windows
210	Author: Ertong([email protected])
211	Web: ert.org.ua
212*/
213var WindowUtils={
214	loaded:false,
215	onLoadHandlers:[],
216
217	onLoad:function()
218	{
219		var hs=WindowUtils.onLoadHandlers;
220		WindowUtils.loaded=true;
221		for (i in hs)
222			if (typeof(hs[i])=='function') hs[i]()
223			else if (typeof(hs[i])=='string') eval(hs[i]);
224	},
225
226	getSize:function (wnd)
227	{
228		var wnd = wnd ? wnd : window;
229		var w,h;
230		if (wnd.innerHeight) // all except Explorer
231		{
232			w = wnd.innerWidth;
233			h = wnd.innerHeight;
234		}
235		else if (wnd.document.documentElement && wnd.document.documentElement.clientHeight)
236			// Explorer 6 Strict Mode
237		{
238			w = wnd.document.documentElement.clientWidth;
239			h = wnd.document.documentElement.clientHeight;
240		}
241		else if (wnd.document.body) // other Explorers
242		{
243			w = wnd.document.body.clientWidth;
244			h = wnd.document.body.clientHeight;
245		}
246
247		return {width:w, height:h};
248	},
249	getScroll:function (wnd)
250	{
251		var wnd = wnd ? wnd : window;
252		var x,y;
253		if (wnd.pageYOffset) // all except Explorer
254		{
255			x = wnd.pageXOffset;
256			y = wnd.pageYOffset;
257		}
258		else if (wnd.document.documentElement && wnd.document.documentElement.scrollTop)
259			// Explorer 6 Strict
260		{
261			x = wnd.document.documentElement.scrollLeft;
262			y = wnd.document.documentElement.scrollTop;
263		}
264		else if (wnd.document.body) // all other Explorers
265		{
266			x = wnd.document.body.scrollLeft;
267			y = wnd.document.body.scrollTop;
268		}
269		return {x:x, y:y};
270	},
271
272	createBlockDiv:function ()
273	{
274		var div=document.createElement('div');
275		var st=div.style;
276		st.position='absolute';
277		st.backgroundColor='#CCCCCC';
278		st.filter='alpha(opacity=50)';
279		st.opacity='.5';
280		st.width = st.height = "100%";
281		st.top = st.left = '0px';
282//			st.width=Math.max(document.body.scrollWidth, document.body.offsetWidth)+"px";
283//			st.height=Math.max(document.body.scrollHeight, document.body.offsetHeight)+"px";
284		st.zIndex=ElemUtils.getMaxZIndex()+1;
285		document.body.appendChild(div);
286		return div;
287	},
288
289	showModal:function (obj, onClose)
290	{
291		if (!this.loaded)
292		{
293			this.onLoadHandlers.push(function(){WindowUtils.showModal(obj, onClose)});
294			return;
295		}
296
297		if (obj.wnd && obj.wnd.opened) return;
298		ElemUtils.switchActiveElements(false);
299		obj.wnd = obj.wnd ? obj.wnd : {};
300		obj.wnd.blockDiv = this.createBlockDiv();
301
302		if (!onClose && obj.wnd.onClose) onClose=obj.wnd.onClose;
303
304		//window will be placed in the table, that is in the div
305		var tbl_div = document.createElement('div');
306		var table = document.createElement('table'); tbl_div.appendChild(table);
307		var tbody = document.createElement('tbody'); table.appendChild(tbody);
308		var tr = document.createElement('tr'); tbody.appendChild(tr);
309		var td = document.createElement('td'); tr.appendChild(td);
310		td.appendChild(obj.parentNode.removeChild(obj));

311		obj.wnd.container = tbl_div;
312
313		var st = tbl_div.style;
314		st.zIndex = ElemUtils.getMaxZIndex()+1;
315		st.position = 'absolute';
316		st.top = st.left = '0px';
317		/*st.width =*/ st.height = '100%';
318
319
320		table.style.width = table.style.height = '100%';
321		table.border = '0';
322		td.vAlign = 'middle';
323		td.align = 'center';
324
325		document.body.appendChild(tbl_div);
326
327		obj.style.display='block';
328		obj.focus();
329		obj.wnd.opened=true;
330
331		if (typeof(obj.wnd.onShow)=='function') obj.wnd.onShow();
332		if (typeof(obj.wnd.onShow)=='string') eval(obj.wnd.onShow);
333
334		obj.wnd.close=function(exitCode)
335		{
336			obj.style.display='none';
337			document.body.appendChild(obj.parentNode.removeChild(obj));
338
339			document.body.removeChild(obj.wnd.container); obj.wnd.container=null;
340			document.body.removeChild(obj.wnd.blockDiv); obj.wnd.blockDiv=null;
341
342			ElemUtils.switchActiveElements(true);
343
344			obj.wnd.opened=false;
345
346			ElemUtils.resetFocus();
347
348			if (typeof(onClose)=='function') onClose(exitCode);
349			if (typeof(onClose)=='string') eval(onClose);
350		}
351	}
352};
353addEvent(window, 'load', WindowUtils.onLoad);