https://northnicholashs.com/apps/js/dialog_boxes/dialog_boxes_20110225.js

1/*
2 *  Dialog Boxes v1.0
3 *  Bhaktavatsalam Nallanthighal
4 *  August 30, 2010
5 *  
6 *  Note: Cross browser information for page width, height, top & left positions obtained
7 *  from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
8 *   
9 *  Parameters:
10 *      1. w: width of the dialog box
11 *      2. h: height of the dialog box
12 *      3. timeout: Number of milliseconds to wait before automatically hiding
13 *      4. fadeSpeed: The speed at which the fade effect occurs
14 *      5. onOpen: The function to call with no parameters when the dialog opens
15 *      6. onClose: The function to call with no parameters when the dialog is closed
16 *      7. srcDiv: The div to pull content from. Overrides "content"
17 *      8. mode: fullscreen | dialog
18 *
19 *      To close the dialog, call DialogBoxes.hide() function
20 *      For custom styling, override the CSS properties for .DB_mask and .DB_dialog
21 */
22var DialogBoxes = {
23	show : function(params) {
24		if(!params) {
25			params = {};
26		}
27		
28		if(!document.getElementById("DB_mask") && !document.getElementById("DB_dialog")) {
29			DialogBoxes.IsDialogOpen = false;
30			DialogBoxes._onOpen = params.onOpen;
31			DialogBoxes._onClose = params.onClose;
32			DialogBoxes._onBeforeClose = params.onBeforeClose;
33			DialogBoxes._fadeSpeed = params.fadeSpeed ? parseInt(params.fadeSpeed, 10) : 15;
34			DialogBoxes._w = params.w ? parseInt(params.w, 10) : 320;
35			DialogBoxes._h = params.h ? parseInt(params.h, 10) : 240;
36			if(params.timeout) {
37				DialogBoxes._timeout = parseInt(params.timeout, 10);
38			}
39			
40			var DB_mask = document.createElement("div");
41			DB_mask.id = "DB_mask";
42			DB_mask.className += " DB_mask";
43						
44			var DB_dialog = document.createElement("div");
45			DB_dialog.id = "DB_dialog";
46			DB_dialog.className += " DB_dialog";
47			
48			DB_mask.onclick = DialogBoxes.hide;
49			
50			var onKeyUp = function(e) {
51				var keyPressed=null;
52				if(e) { 
53					keyPressed = e.keyCode ? e.keyCode : e.which;
54				} else if(window.event) {
55					keyPressed = window.event.keyCode;
56				}
57					
58				if(keyPressed==27 && document.getElementById("DB_dialog")) {
59					if(document.removeEventListener) {
60						document.removeEventListener('keyup', onKeyUp, false);
61					}
62					else if(document.detachEvent) {
63						document.detachEvent('onkeyup', onKeyUp);
64					}
65							 
66					if(!DialogBoxes.hide()) {
67						if(document.addEventListener) {
68							document.addEventListener('keyup', onKeyUp, false);
69						}
70						else if(document.attachEvent) {
71							document.attachEvent('onkeyup', onKeyUp);
72						}			
73					}
74				}
75				return true;
76			};
77			
78			if(document.addEventListener) {
79				document.addEventListener('keyup', onKeyUp, false);
80			}
81			else if(document.attachEvent) {
82				document.attachEvent('onkeyup', onKeyUp);
83			}
84	
85			/* Window top + (window height - dialog height)/2 */
86			/* Window left + (window width - dialog width)/2 */
87			if(params.mode!="fullscreen") {
88				DB_dialog.style.cssText += "; height: " + DialogBoxes._h + "px; width: " + DialogBoxes._w + "px;";
89			}
90			DB_dialog.alpha = 0;
91				
92			if(params.srcDiv) {
93				DialogBoxes._srcDiv = document.getElementById(params.srcDiv) ? document.getElementById(params.srcDiv).cloneNode(true) : null;
94				DialogBoxes._srcContainer = document.getElementById(params.srcDiv).parentNode; 
95				DB_dialog.appendChild(document.getElementById(params.srcDiv));
96			}
97			document.body.appendChild(DB_mask);
98			document.body.appendChild(DB_dialog);
99			
100			DialogBoxes._dialogTimer = setInterval(function() { DialogBoxes.fade(true); }, DialogBoxes._fadeSpeed);
101			if(DialogBoxes._timeout) {
102				window.setTimeout(function() { DialogBoxes.hide(); }, DialogBoxes._timeout);
103			}
104		}
105	},
106	
107	hide : function() {
108		if(DialogBoxes.IsDialogOpen) {
109			if(DialogBoxes._onBeforeClose) {
110				if(!DialogBoxes._onBeforeClose()) {
111					return false;
112				};
113			}
114			clearInterval(DialogBoxes._dialogTimer);
115			var DB_dialog = document.getElementById("DB_dialog");
116			while(DB_dialog.hasChildNodes()) {
117				DB_dialog.removeChild(DB_dialog.lastChild);
118			}
119			DialogBoxes._dialogTimer = setInterval(function() { DialogBoxes.fade(false); }, DialogBoxes._fadeSpeed);
120		}
121		return true;
122	},
123	
124	fade : function(show) {
125		var DB_dialog = document.getElementById("DB_dialog");
126		var dialog_mask_transparency = DB_dialog.alpha + ((show ? 1 : -1) * DialogBoxes._fadeSpeed); 
127		DB_dialog.alpha = dialog_mask_transparency;
128		DB_dialog.style.opacity = (dialog_mask_transparency / 100);
129		DB_dialog.style.filter = "alpha(opacity=" + dialog_mask_transparency + ")";
130		
131		if(dialog_mask_transparency >= 99) {
132			clearInterval(DialogBoxes._dialogTimer);
133			DialogBoxes._dialogTimer = null;
134			
135			DialogBoxes.IsDialogOpen = true;
136			if(DialogBoxes._onOpen) {
137				DialogBoxes._onOpen();
138			}
139		} else if(dialog_mask_transparency <= 1) {
140			if(DialogBoxes._srcDiv && DialogBoxes._srcContainer) {
141				DialogBoxes._srcContainer.appendChild(DialogBoxes._srcDiv);
142				DialogBoxes._srcContainer = null;
143				DialogBoxes._srcDiv = null;
144			}
145			document.body.removeChild(document.getElementById("DB_mask"));
146			document.body.removeChild(document.getElementById("DB_dialog"));
147			clearInterval(DialogBoxes._dialogTimer);
148			DialogBoxes.IsDialogOpen = false;

149			if(DialogBoxes._onClose) {
150				DialogBoxes._onClose();
151			}
152		}
153	},
154	
155	isLoaded : function() {
156		return true;
157	}
158};