[add] sample of modalbox reusage

DHTMLX · Oct 31, 2011 · df65485 · df65485
1 parent 02004ca
commit df65485
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 6 deletions.
diff --git a/codebase/message.js b/codebase/message.js
@@ -76,8 +76,7 @@ if(!window.dhtmlx)
 
 		return text.id;
 	}
-
-	function _createBox(config, ok, cancel){
+	function _boxStructure(config, ok, cancel){
 		var box = document.createElement("DIV");
 		box.className = " dhtmlx_modal_box dhtmlx-"+config.type;
 		box.setAttribute("dhxbox", 1);
@@ -90,7 +89,7 @@ if(!window.dhtmlx)
 			box.style.height = config.height;
 		if (config.title)
 			inner+='<div class="dhtmlx_popup_title">'+config.title+'</div>';
-		inner+='<div class="dhtmlx_popup_text"><span>'+config.text+'</span></div><div  class="dhtmlx_popup_controls">';
+		inner+='<div class="dhtmlx_popup_text"><span>'+(config.content?'':config.text)+'</span></div><div  class="dhtmlx_popup_controls">';
 		if (ok)
 			inner += button(config.ok || "OK", true);
 		if (cancel)
@@ -102,7 +101,12 @@ if(!window.dhtmlx)
 		inner += '</div>';
 		box.innerHTML = inner;
 
-
+		if (config.content){
+			var node = config.content;
+			if (typeof node == "string") 
+				node = document.getElementById(node)
+			box.childNodes[config.title?1:0].appendChild(node);
+		}
 
 		box.onclick = function(e){
 			e = e ||event;
@@ -118,7 +122,13 @@ if(!window.dhtmlx)
 		if (ok||cancel)
 			_dhx_msg_cfg = config;
 
-		modality(true);
+		return box;
+	}
+	function _createBox(config, ok, cancel){
+		var box = config.tagName ? config : _boxStructure(config, ok, cancel);
+
+		if (!config.hidden)
+			modality(true);
 		document.body.appendChild(box);
 		var x = Math.abs(Math.floor(((window.innerWidth||document.documentElement.offsetWidth) - box.offsetWidth)/2));
 		var y = Math.abs(Math.floor(((window.innerHeight||document.documentElement.offsetHeight) - box.offsetHeight)/2));
@@ -127,8 +137,11 @@ if(!window.dhtmlx)
 		else
 			box.style.top = y+'px';
 		box.style.left = x+'px';
-		
+
 		box.focus();
+		if (config.hidden)
+			dhtmlx.modalbox.hide(box);
+
 		return box;
 	}
 

diff --git a/samples/05_dialog.html → samples/05_modalbox.html b/samples/05_dialog.html → samples/05_modalbox.html
diff --git a/samples/05_modalbox_reuse.html b/samples/05_modalbox_reuse.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Message - info</title>
+	<script type="text/javascript" src='../codebase/message.js'></script>
+	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_default.css">
+	<style type="text/css">
+		body, html {
+			height:100%;
+		}
+		input.inform{
+			width:220px;
+			margin-left:20px;
+		}
+		textarea.inform{
+			width:220px;
+			height:50px;
+			margin-left:20px;
+		}
+		#form_in_box div{
+			text-align:left;
+		}
+		.dhtmlx_button{
+			margin-top:10px;
+		}
+	</style>
+</head>
+<body>
+	Create once, use multiple times
+
+
+	<input type='button' value='Show form' onclick="dhtmlx.modalbox(myform)"><br>
+	<div id='form_in_box'>
+		<div><label> Input width <input class='inform' type='text'></label></div>
+		<div><label> Input height <input class='inform' type='text'></label></div>
+		<div><label> Input details <textarea class='inform'></textarea></label></div>
+		<div>
+			<span class='dhtmlx_button'>
+				<input type='button' value='save' onclick='save_callback(this)' style='width:250px;'></span>
+			</label>
+		</div>
+	</div>
+
+
+	<script type="text/javascript">
+		var myform = dhtmlx.modalbox({ content:"form_in_box", hidden:true });
+		function save_callback(box){
+			dhtmlx.message("Saving...");
+			dhtmlx.modalbox.hide(box);
+		}
+	</script>
+</body>
+</html>