Permalink
Browse files

[add] sample of modalbox reusage

  • Loading branch information...
Stanislav-Wolski committed Oct 31, 2011
1 parent 02004ca commit df65485d7516856b60e5d5ffbdc47725ea94ea2b
View
@@ -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;
}
File renamed without changes.
@@ -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>

0 comments on commit df65485

Please sign in to comment.