Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

[add] sample of modalbox reusage

  • Loading branch information...
commit df65485d7516856b60e5d5ffbdc47725ea94ea2b 1 parent 02004ca
Stanislau Wolski authored
25  codebase/message.js
@@ -76,8 +76,7 @@ if(!window.dhtmlx)
76 76
 
77 77
 		return text.id;
78 78
 	}
79  
-
80  
-	function _createBox(config, ok, cancel){
  79
+	function _boxStructure(config, ok, cancel){
81 80
 		var box = document.createElement("DIV");
82 81
 		box.className = " dhtmlx_modal_box dhtmlx-"+config.type;
83 82
 		box.setAttribute("dhxbox", 1);
@@ -90,7 +89,7 @@ if(!window.dhtmlx)
90 89
 			box.style.height = config.height;
91 90
 		if (config.title)
92 91
 			inner+='<div class="dhtmlx_popup_title">'+config.title+'</div>';
93  
-		inner+='<div class="dhtmlx_popup_text"><span>'+config.text+'</span></div><div  class="dhtmlx_popup_controls">';
  92
+		inner+='<div class="dhtmlx_popup_text"><span>'+(config.content?'':config.text)+'</span></div><div  class="dhtmlx_popup_controls">';
94 93
 		if (ok)
95 94
 			inner += button(config.ok || "OK", true);
96 95
 		if (cancel)
@@ -102,7 +101,12 @@ if(!window.dhtmlx)
102 101
 		inner += '</div>';
103 102
 		box.innerHTML = inner;
104 103
 
105  
-
  104
+		if (config.content){
  105
+			var node = config.content;
  106
+			if (typeof node == "string") 
  107
+				node = document.getElementById(node)
  108
+			box.childNodes[config.title?1:0].appendChild(node);
  109
+		}
106 110
 
107 111
 		box.onclick = function(e){
108 112
 			e = e ||event;
@@ -118,7 +122,13 @@ if(!window.dhtmlx)
118 122
 		if (ok||cancel)
119 123
 			_dhx_msg_cfg = config;
120 124
 
121  
-		modality(true);
  125
+		return box;
  126
+	}
  127
+	function _createBox(config, ok, cancel){
  128
+		var box = config.tagName ? config : _boxStructure(config, ok, cancel);
  129
+		
  130
+		if (!config.hidden)
  131
+			modality(true);
122 132
 		document.body.appendChild(box);
123 133
 		var x = Math.abs(Math.floor(((window.innerWidth||document.documentElement.offsetWidth) - box.offsetWidth)/2));
124 134
 		var y = Math.abs(Math.floor(((window.innerHeight||document.documentElement.offsetHeight) - box.offsetHeight)/2));
@@ -127,8 +137,11 @@ if(!window.dhtmlx)
127 137
 		else
128 138
 			box.style.top = y+'px';
129 139
 		box.style.left = x+'px';
130  
-		
  140
+
131 141
 		box.focus();
  142
+		if (config.hidden)
  143
+			dhtmlx.modalbox.hide(box);
  144
+
132 145
 		return box;
133 146
 	}
134 147
 
0  samples/05_dialog.html → samples/05_modalbox.html
File renamed without changes
53  samples/05_modalbox_reuse.html
... ...
@@ -0,0 +1,53 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<title>Message - info</title>
  5
+	<script type="text/javascript" src='../codebase/message.js'></script>
  6
+	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_default.css">
  7
+	<style type="text/css">
  8
+		body, html {
  9
+			height:100%;
  10
+		}
  11
+		input.inform{
  12
+			width:220px;
  13
+			margin-left:20px;
  14
+		}
  15
+		textarea.inform{
  16
+			width:220px;
  17
+			height:50px;
  18
+			margin-left:20px;
  19
+		}
  20
+		#form_in_box div{
  21
+			text-align:left;
  22
+		}
  23
+		.dhtmlx_button{
  24
+			margin-top:10px;
  25
+		}
  26
+	</style>
  27
+</head>
  28
+<body>
  29
+	Create once, use multiple times
  30
+
  31
+
  32
+	<input type='button' value='Show form' onclick="dhtmlx.modalbox(myform)"><br>
  33
+	<div id='form_in_box'>
  34
+		<div><label> Input width <input class='inform' type='text'></label></div>
  35
+		<div><label> Input height <input class='inform' type='text'></label></div>
  36
+		<div><label> Input details <textarea class='inform'></textarea></label></div>
  37
+		<div>
  38
+			<span class='dhtmlx_button'>
  39
+				<input type='button' value='save' onclick='save_callback(this)' style='width:250px;'></span>
  40
+			</label>
  41
+		</div>
  42
+	</div>
  43
+
  44
+
  45
+	<script type="text/javascript">
  46
+		var myform = dhtmlx.modalbox({ content:"form_in_box", hidden:true });
  47
+		function save_callback(box){
  48
+			dhtmlx.message("Saving...");
  49
+			dhtmlx.modalbox.hide(box);
  50
+		}
  51
+	</script>
  52
+</body>
  53
+</html>

0 notes on commit df65485

Please sign in to comment.
Something went wrong with that request. Please try again.