chwkai · January 30, 2010 08:48
diff --git a/creating float dialog in javascript.html b/creating float dialog in javascript.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 		<title>Untitled Document</title>
 		<style type="text/css">
 			#sampleDialog{
 				height:200px;
 				width:500px;
 				background:white;
 				border:2px solid black;
 				position:fixed;
 				overflow:hidden;
 				z-index:99;
 			}
 			
 			#sampleDialog #title{
 				background-color: black;
 				font-weight:bold;
 				color:white;
 				height:20px;
 				padding:2px;
 			}
 			
 			#sampleDialog #content{
 				padding:2px;
 			}
 			
 			#sampleDialog #title:hover{
 				cursor:move;
 				background:gray;
 			}
 			
 			#sampleDialog #close{
 				cursor:pointer;
 				position:absolute;
 				color:white;
 				font-weight:bold;
 				top:0;
 				z-index:100;
 			}
 			
 			#overlay{
 				width:100%;
 				height:100%;
 				left:0;
 				top:0;
 				position:fixed;
 				background:gray;
 				opacity:0.5;
 				z-index:98;
 			}
 		</style>
 		<script type="text/javascript">
 			
 			/**
 			 * the purpose of the following code is to give a demo of 
 			 * how to realize the floating dialog using javascript.
 			 * It was written without any consideration of cross-browser compatibility,
 			 * and it can be run successfully under the firefox 3.5.7.
 			 */
 			var Samples = {};
 			
 			/**
 			 * to show a floating dialog displaying the given dom element
 			 * @param {Object} title "title of the dialog"
 			 * @param {Object} element "the element will be set as content of the dialog"
 			 * @param {Object} modal "whether to make a modal dialog"
 			 * @param {Object} callback "callback function for the dialog closed"
 			 */
 			Samples.dialog = function(title, element, modal, callback){
 				if(!element){
 					throw "the elment must be specified";
 				}
 				
 				// initializing dialog: title, close, content
 				var container = document.createElement("div");
 				var titleContainer = document.createElement("div");
 				var contentContainer = document.createElement("div");
 				var closeContainer = document.createElement("span");
 				container.setAttribute("id", "sampleDialog");
 				titleContainer.setAttribute("id", "title");
 				closeContainer.setAttribute("id", "close");
 				contentContainer.setAttribute("id", "content");
 				titleContainer.innerHTML = title;
 				closeContainer.innerHTML = "X";
 				
 				container.appendChild(titleContainer);
 				contentContainer.appendChild(element);
 				container.appendChild(contentContainer);
 				container.appendChild(closeContainer);
 				document.body.appendChild(container);
 				// place the container in the center of the browser window
 				window.center(container);
 				closeContainer.style.left = (container.offsetWidth - 20) + "px";
 				
 				if(modal){
 					var overlay = document.createElement("div");
 					overlay.setAttribute("id", "overlay");
 					document.body.appendChild(overlay);
 					
 					container._overlay = overlay;
 				}
 				
 				// binding mouse events
 				closeContainer.onclick = function(evt){
 					if (container._overlay){
 						container._overlay.parentNode.removeChild(container._overlay);
 					}
 					
 					container.parentNode.removeChild(container);
 					// calling the callback function to notify the dialog closed  
 					if(callback){
 						callback.call(container);
 					}
 					evt.stopPropagation();
 				};
 				
 				// start dragging when the mouse clicked in the title area
 				titleContainer.onmousedown = function(evt){
 					evt = evt || window.event;
 					
 					container._dragging = true;
 					container._originalLeft = container.offsetLeft;
 					container._originalTop = container.offsetTop; 
 					container._mouseLeft = evt.clientX;
 					container._mouseTop = evt.clientY;
 				};
 				
 				// do the dragging during the mouse move
 				document.onmousemove = function(evt){
 					evt = evt || window.event;
 					
 					if(container._dragging){
 						container.style.left = 
 							(container._originalLeft + evt.clientX - container._mouseLeft) + "px";
 						container.style.top = 
 							(container._originalTop + evt.clientY - container._mouseTop) + "px";
 					}
 				};
 				
 				// finish the dragging when release the mouse button
 				document.onmouseup = function(evt){
 					evt = evt || window.event;
 					
 					if(container._dragging){
 						container.style.left = 
 							(container._originalLeft + evt.clientX - container._mouseLeft) + "px";
 						container.style.top = 
 							(container._originalTop + evt.clientY - container._mouseTop) + "px";
 						
 						container._dragging = false;
 					}
 				};
 				
 				return container;
 			};
 			
 			window.onload = function(){
 				document.getElementById("showDialog").onclick = function(){
 					Samples.dialog("MyDialog", document.getElementById("content").cloneNode(true), false, onDialogClosed);
 				};
 				
 				document.getElementById("showModalDialog").onclick = function(){
 					Samples.dialog("MyDialog", document.getElementById("content").cloneNode(true), true, onDialogClosed);
 				};
 			};
 			
 			/**
 			 * place the given dom element in the center of the browser window
 			 * @param {Object} element
 			 */
 			function center(element){
 				if(element){
 					element.style.left = (window.innerWidth - element.offsetWidth) / 2 + "px";
 					element.style.top = (window.innerHeight - element.offsetHeight) / 2 + "px";
 				}
 			}
 			
 			/**
 			 * callback function for the dialog closed event
 			 * @param {Object} container 
 			 */
 			function onDialogClosed(container){
 				window.alert("you have closed the dialog");
 			}
 		</script>
 	</head>
 	<body>
 		<input type="button" id="showDialog" value="Show Dialog"/>&nbsp;&nbsp;
 		<input type="button" id="showModalDialog" value="Show Modal Dialog"/>
 		<div id="content">
 			the following content will be displayed in the dialog:<br/>
 			Because JavaScript is the language of the web browser, and because the web browser has become the dominant application delivery system, and because JavaScript isn't too bad, JavaScript has become the World's Most Popular Programming Language. Its popularity is growing. It is now being embedded in other applications and contexts. JavaScript has become important.
 		</div>
 	</body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
	<style type="text/css">
	#sampleDialog{
	height:200px;
	width:500px;
	background:white;
	border:2px solid black;
	position:fixed;
	overflow:hidden;
	z-index:99;
	}

	#sampleDialog #title{
	background-color: black;
	font-weight:bold;
	color:white;
	height:20px;
	padding:2px;
	}

	#sampleDialog #content{
	padding:2px;
	}

	#sampleDialog #title:hover{
	cursor:move;
	background:gray;
	}

	#sampleDialog #close{
	cursor:pointer;
	position:absolute;
	color:white;
	font-weight:bold;
	top:0;
	z-index:100;
	}

	#overlay{
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:fixed;
	background:gray;
	opacity:0.5;
	z-index:98;
	}
	</style>
	<script type="text/javascript">

	/**
	* the purpose of the following code is to give a demo of
	* how to realize the floating dialog using javascript.
	* It was written without any consideration of cross-browser compatibility,
	* and it can be run successfully under the firefox 3.5.7.
	*/
	var Samples = {};

	/**
	* to show a floating dialog displaying the given dom element
	* @param {Object} title "title of the dialog"
	* @param {Object} element "the element will be set as content of the dialog"
	* @param {Object} modal "whether to make a modal dialog"
	* @param {Object} callback "callback function for the dialog closed"
	*/
	Samples.dialog = function(title, element, modal, callback){
	if(!element){
	throw "the elment must be specified";
	}

	// initializing dialog: title, close, content
	var container = document.createElement("div");
	var titleContainer = document.createElement("div");
	var contentContainer = document.createElement("div");
	var closeContainer = document.createElement("span");
	container.setAttribute("id", "sampleDialog");
	titleContainer.setAttribute("id", "title");
	closeContainer.setAttribute("id", "close");
	contentContainer.setAttribute("id", "content");
	titleContainer.innerHTML = title;
	closeContainer.innerHTML = "X";

	container.appendChild(titleContainer);
	contentContainer.appendChild(element);
	container.appendChild(contentContainer);
	container.appendChild(closeContainer);
	document.body.appendChild(container);
	// place the container in the center of the browser window
	window.center(container);
	closeContainer.style.left = (container.offsetWidth - 20) + "px";

	if(modal){
	var overlay = document.createElement("div");
	overlay.setAttribute("id", "overlay");
	document.body.appendChild(overlay);

	container._overlay = overlay;
	}

	// binding mouse events
	closeContainer.onclick = function(evt){
	if (container._overlay){
	container._overlay.parentNode.removeChild(container._overlay);
	}

	container.parentNode.removeChild(container);
	// calling the callback function to notify the dialog closed
	if(callback){
	callback.call(container);
	}
	evt.stopPropagation();
	};

	// start dragging when the mouse clicked in the title area
	titleContainer.onmousedown = function(evt){
	evt = evt \|\| window.event;

	container._dragging = true;
	container._originalLeft = container.offsetLeft;
	container._originalTop = container.offsetTop;
	container._mouseLeft = evt.clientX;
	container._mouseTop = evt.clientY;
	};

	// do the dragging during the mouse move
	document.onmousemove = function(evt){
	evt = evt \|\| window.event;

	if(container._dragging){
	container.style.left =
	(container._originalLeft + evt.clientX - container._mouseLeft) + "px";
	container.style.top =
	(container._originalTop + evt.clientY - container._mouseTop) + "px";
	}
	};

	// finish the dragging when release the mouse button
	document.onmouseup = function(evt){
	evt = evt \|\| window.event;

	if(container._dragging){
	container.style.left =
	(container._originalLeft + evt.clientX - container._mouseLeft) + "px";
	container.style.top =
	(container._originalTop + evt.clientY - container._mouseTop) + "px";

	container._dragging = false;
	}
	};

	return container;
	};

	window.onload = function(){
	document.getElementById("showDialog").onclick = function(){
	Samples.dialog("MyDialog", document.getElementById("content").cloneNode(true), false, onDialogClosed);
	};

	document.getElementById("showModalDialog").onclick = function(){
	Samples.dialog("MyDialog", document.getElementById("content").cloneNode(true), true, onDialogClosed);
	};
	};

	/**
	* place the given dom element in the center of the browser window
	* @param {Object} element
	*/
	function center(element){
	if(element){
	element.style.left = (window.innerWidth - element.offsetWidth) / 2 + "px";
	element.style.top = (window.innerHeight - element.offsetHeight) / 2 + "px";
	}
	}

	/**
	* callback function for the dialog closed event
	* @param {Object} container
	*/
	function onDialogClosed(container){
	window.alert("you have closed the dialog");
	}
	</script>
	</head>
	<body>
	<input type="button" id="showDialog" value="Show Dialog"/>
	<input type="button" id="showModalDialog" value="Show Modal Dialog"/>
	<div id="content">
	the following content will be displayed in the dialog:<br/>
	Because JavaScript is the language of the web browser, and because the web browser has become the dominant application delivery system, and because JavaScript isn't too bad, JavaScript has become the World's Most Popular Programming Language. Its popularity is growing. It is now being embedded in other applications and contexts. JavaScript has become important.
	</div>
	</body>
	</html>
No results found