diff --git a/README.md b/README.md
index 8731f7c..4ce4366 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Custom notifications, alerts, confirmations
This library was extracted from code of [DHTMLX suite][dhtmlx].
- Library can be used under terms of [MIT license][mit] (basically **free**).
-- Only **3kb** gzipped, without external dependencies.
+- Only **4kb** gzipped, without external dependencies.
- Works in FF, Chrome, Safari (including iPhone), Opera, IE7+
Live samples can be checked at [http://dhtmlx.github.com/message/][message]
diff --git a/codebase/message.js b/codebase/message.js
index 8c0098c..138fd1a 100644
--- a/codebase/message.js
+++ b/codebase/message.js
@@ -7,12 +7,13 @@ if(!window.dhtmlx)
var usercall = config.callback;
modality(false);
config.box.parentNode.removeChild(config.box);
- _dhx_msg_cfg = box = config.box = null;
+ _dhx_msg_cfg = config.box = null;
if (usercall)
usercall(result);
}
function modal_key(e){
if (_dhx_msg_cfg){
+ e = e||event;
var code = e.which||event.keyCode;
if (dhtmlx.message.keyboard){
if (code == 13 || code == 32)
@@ -28,11 +29,13 @@ if(!window.dhtmlx)
if (document.attachEvent)
document.attachEvent("onkeydown", modal_key);
else
- document.addEventListener("keydown", modal_key, false);
+ document.addEventListener("keydown", modal_key, true);
function modality(mode){
if(!modality.cover){
modality.cover = document.createElement("DIV");
+ //necessary for IE only
+ modality.cover.onkeydown = modal_key;
modality.cover.className = "dhx_modal_cover";
document.body.appendChild(modality.cover);
}
@@ -104,7 +107,9 @@ if(!window.dhtmlx)
if (config.content){
var node = config.content;
if (typeof node == "string")
- node = document.getElementById(node)
+ node = document.getElementById(node);
+ if (node.style.display == 'none')
+ node.style.display = "";
box.childNodes[config.title?1:0].appendChild(node);
}
@@ -113,7 +118,7 @@ if(!window.dhtmlx)
var source = e.target || e.srcElement;
if (!source.className) source = source.parentNode;
if (source.className == "dhtmlx_popup_button"){
- result = source.getAttribute("result");
+ var result = source.getAttribute("result");
result = (result == "true")||(result == "false"?false:result);
callback(config, result);
}
@@ -130,13 +135,15 @@ if(!window.dhtmlx)
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));
+ var x = config.left||Math.abs(Math.floor(((window.innerWidth||document.documentElement.offsetWidth) - box.offsetWidth)/2));
+ var y = config.top||Math.abs(Math.floor(((window.innerHeight||document.documentElement.offsetHeight) - box.offsetHeight)/2));
if (config.position == "top")
box.style.top = "-3px";
else
box.style.top = y+'px';
box.style.left = x+'px';
+ //necessary for IE only
+ box.onkeydown = modal_key;
box.focus();
if (config.hidden)
@@ -172,20 +179,20 @@ if(!window.dhtmlx)
return text;
}
dhtmlx.alert = function(){
- text = box_params.apply(this, arguments);
+ var text = box_params.apply(this, arguments);
text.type = text.type || "confirm";
return alertPopup(text);
};
dhtmlx.confirm = function(){
- text = box_params.apply(this, arguments);
+ var text = box_params.apply(this, arguments);
text.type = text.type || "alert";
return confirmPopup(text);
};
dhtmlx.modalbox = function(){
- text = box_params.apply(this, arguments);
+ var text = box_params.apply(this, arguments);
text.type = text.type || "alert";
return boxPopup(text);
- }
+ };
dhtmlx.modalbox.hide = function(node){
while (node && node.getAttribute && !node.getAttribute("dhxbox"))
node = node.parentNode;
@@ -193,7 +200,7 @@ if(!window.dhtmlx)
node.parentNode.removeChild(node);
modality(false);
}
- }
+ };
var t = dhtmlx.message = function(text, type, expire, id){
text = params.apply(this, arguments);
text.type = text.type||"info";
diff --git a/codebase/themes/message_default.css b/codebase/themes/message_default.css
index a7fd85c..3d0394e 100644
--- a/codebase/themes/message_default.css
+++ b/codebase/themes/message_default.css
@@ -7,6 +7,7 @@
.dhtmlx-info{
min-width: 120px;
+ min-height:20px;
padding:4px 4px 4px 20px;
font-family:Tahoma;
z-index: 10000;
@@ -21,9 +22,12 @@
}
.dhtmlx-info.hidden{
height:0px;
- padding:0px;
+ min-height: 0px;
+ padding-top:0px;
+ padding-bottom:0px;
border-width:0px;
- margin:0px;
+ margin-top:0px;
+ margin-bottom:0px;
overflow:hidden;
}
@@ -122,7 +126,6 @@ div.dhx_modal_cover {
.dhtmlx_button, .dhtmlx_popup_button{
box-shadow: 0px 0px 4px #888;
border:1px solid #838383;
-
}
.dhtmlx_button input, .dhtmlx_popup_button div{
border:1px solid #FFF;
@@ -132,8 +135,11 @@ div.dhx_modal_cover {
border-radius:6px;
font-size:15px;
+ font-weight:normal;
+ -moz-box-sizing:content-box;
+ box-sizing:content-box;
- color:#fff; padding:0px; margin:0px; box-sizing:content-box;
+ color:#fff; padding:0px; margin:0px;
vertical-align:top;
height:28px;
diff --git a/codebase/themes/message_growl_dark.css b/codebase/themes/message_growl_dark.css
index af036d6..b20a83e 100644
--- a/codebase/themes/message_growl_dark.css
+++ b/codebase/themes/message_growl_dark.css
@@ -7,6 +7,7 @@
.dhtmlx-info{
min-width: 120px;
+ min-height: 20px;
padding:4px 4px 4px 20px;
font-family:Tahoma;
z-index: 10000;
@@ -21,9 +22,12 @@
}
.dhtmlx-info.hidden{
height:0px;
- padding:0px;
+ min-height: 0px;
+ padding-top:0px;
+ padding-bottom:0px;
border-width:0px;
- margin:0px;
+ margin-top:0px;
+ margin-bottom:0px;
overflow:hidden;
}
@@ -59,7 +63,7 @@
background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
}
-.dhtmlx-info, .dhtmlx_popup_button{
+.dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
user-select: none;
-webkit-user-select: none;
-moz-user-select:-moz-none;
@@ -76,9 +80,7 @@
padding:5px;
}
-.dhtmlx_popup_button{
- min-width: 120px;
- width: 120px;
+.dhtmlx_popup_button, .dhtmlx_button{
height: 30px;
line-height:30px;
@@ -88,6 +90,9 @@
color:#FFF;
}
+.dhtmlx_popup_button{
+ min-width: 120px;
+}
div.dhx_modal_cover {
background-color:#000;
@@ -121,12 +126,11 @@ div.dhx_modal_cover {
}
/*Skin section*/
-
-.dhtmlx_popup_button{
+.dhtmlx_button, .dhtmlx_popup_button{
box-shadow: 0px 0px 4px #888;
border:1px solid #838383;
}
-.dhtmlx_popup_button div{
+.dhtmlx_button input, .dhtmlx_popup_button div{
border:1px solid #FFF;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
@@ -135,11 +139,17 @@ div.dhx_modal_cover {
border-radius:6px;
font-size:15px;
+ -moz-box-sizing:content-box;
+ box-sizing:content-box;
+
+ color:#fff; padding:0px; margin:0px;
+ vertical-align:top;
+
height:28px;
line-height:28px;
}
-.dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
+.dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
diff --git a/codebase/themes/message_growl_shiny.css b/codebase/themes/message_growl_shiny.css
index 408630f..a3e2b1e 100644
--- a/codebase/themes/message_growl_shiny.css
+++ b/codebase/themes/message_growl_shiny.css
@@ -7,6 +7,7 @@
.dhtmlx-info{
min-width: 120px;
+ min-height: 20px;
padding:4px 4px 4px 20px;
font-family:Tahoma;
z-index: 10000;
@@ -21,9 +22,12 @@
}
.dhtmlx-info.hidden{
height:0px;
- padding:0px;
+ min-height: 0px;
+ padding-top:0px;
+ padding-bottom:0px;
border-width:0px;
- margin:0px;
+ margin-top:0px;
+ margin-bottom:0px;
overflow:hidden;
}
@@ -60,7 +64,7 @@
background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
}
-.dhtmlx-info, .dhtmlx_popup_button{
+.dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
user-select: none;
-webkit-user-select: none;
-moz-user-select:-moz-none;
@@ -77,9 +81,7 @@
padding:5px;
}
-.dhtmlx_popup_button{
- min-width: 120px;
- width: 120px;
+.dhtmlx_popup_button, .dhtmlx_button{
height: 30px;
line-height:30px;
@@ -89,6 +91,9 @@
color:#FFF;
}
+.dhtmlx_popup_button{
+ min-width: 120px;
+}
div.dhx_modal_cover {
background-color:#000;
@@ -122,12 +127,11 @@ div.dhx_modal_cover {
}
/*Skin section*/
-
-.dhtmlx_popup_button{
+.dhtmlx_button, .dhtmlx_popup_button{
box-shadow: 0px 0px 4px #888;
border:1px solid #838383;
}
-.dhtmlx_popup_button div{
+.dhtmlx_button input, .dhtmlx_popup_button div{
border:1px solid #FFF;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
@@ -136,11 +140,17 @@ div.dhx_modal_cover {
border-radius:6px;
font-size:15px;
+ -moz-box-sizing:content-box;
+ box-sizing:content-box;
+
+ color:#fff; padding:0px; margin:0px;
+ vertical-align:top;
+
height:28px;
line-height:28px;
}
-.dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
+.dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
diff --git a/codebase/themes/message_skyblue.css b/codebase/themes/message_skyblue.css
index ee7e4ef..4c11959 100644
--- a/codebase/themes/message_skyblue.css
+++ b/codebase/themes/message_skyblue.css
@@ -7,6 +7,7 @@
.dhtmlx-info{
min-width: 120px;
+ min-height: 20px;
padding:4px 4px 4px 20px;
font-family:Tahoma;
z-index: 10000;
@@ -21,9 +22,12 @@
}
.dhtmlx-info.hidden{
height:0px;
- padding:0px;
+ min-height: 0px;
+ padding-top:0px;
+ padding-bottom:0px;
border-width:0px;
- margin:0px;
+ margin-top:0px;
+ margin-bottom:0px;
overflow:hidden;
}
@@ -57,7 +61,7 @@
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAARElEQVR4nH3MMQqAQBQD0dnZBTvvf80tBBEhNh9EFKuERwhz2z3OGDA0EwxI5aelvDq/hkn54+O210dtujjEYXN0XJdc1CE1MA5mcdsAAAAASUVORK5CYII=);
}
-.dhtmlx-info, .dhtmlx_popup_button{
+.dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
user-select: none;
-webkit-user-select: none;
-moz-user-select:-moz-none;
@@ -74,9 +78,7 @@
padding:5px;
}
-.dhtmlx_popup_button{
- min-width: 120px;
- width: 120px;
+.dhtmlx_popup_button, .dhtmlx_button{
height: 30px;
line-height:30px;
@@ -86,6 +88,9 @@
color:#FFF;
}
+.dhtmlx_popup_button{
+ min-width: 120px;
+}
div.dhx_modal_cover {
background-color:#000;
@@ -119,23 +124,28 @@ div.dhx_modal_cover {
}
/*Skin section*/
-
-.dhtmlx_popup_button{
+.dhtmlx_button, .dhtmlx_popup_button{
box-shadow: 0px 0px 4px #888;
border:1px solid #838383;
}
-.dhtmlx_popup_button div{
+.dhtmlx_button input, .dhtmlx_popup_button div{
border:1px solid #FFF;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAQElEQVR4nE3LMQ7AIAxD0R9TxP3PydalW8xAQJ0i2y/M95ONTOxrlCC7MigdMtz92LxdlKPc/3d7jPqDRgv1xgLuDiwEIl5MZQAAAABJRU5ErkJggg==);
color:#000;
border-radius:6px;
font-size:15px;
+ -moz-box-sizing:content-box;
+ box-sizing:content-box;
+
+ color:#000; padding:0px; margin:0px;
+ vertical-align:top;
+
height:28px;
line-height:28px;
}
-.dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
+.dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAARklEQVR4nE2LMQ6AIADEykUG3Nz9/yf4Ar8g7K4Oeg4KOFxyTVNyqUrbLoMwAgt4+dt0nT0+IP/cbD0ag0JAabm1xkvn0R7oABW07Ic3sQAAAABJRU5ErkJggg==);
}
.dhtmlx_popup_title{
diff --git a/codebase/themes/message_solid.css b/codebase/themes/message_solid.css
index 15ce287..8aa1a12 100644
--- a/codebase/themes/message_solid.css
+++ b/codebase/themes/message_solid.css
@@ -7,6 +7,7 @@
.dhtmlx-info{
min-width: 120px;
+ min-height: 20px;
padding:4px 4px 4px 20px;
font-family:Tahoma;
z-index: 10000;
@@ -21,9 +22,12 @@
}
.dhtmlx-info.hidden{
height:0px;
- padding:0px;
+ min-height: 0px;
+ padding-top:0px;
+ padding-bottom:0px;
border-width:0px;
- margin:0px;
+ margin-top:0px;
+ margin-bottom:0px;
overflow:hidden;
}
@@ -59,7 +63,7 @@
background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
}
-.dhtmlx-info, .dhtmlx_popup_button{
+.dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
user-select: none;
-webkit-user-select: none;
-moz-user-select:-moz-none;
@@ -76,9 +80,7 @@
padding:5px;
}
-.dhtmlx_popup_button{
- min-width: 120px;
- width: 120px;
+.dhtmlx_popup_button, .dhtmlx_button{
height: 30px;
line-height:30px;
@@ -88,6 +90,9 @@
color:#FFF;
}
+.dhtmlx_popup_button{
+ min-width: 120px;
+}
div.dhx_modal_cover {
background-color:#000;
@@ -121,12 +126,11 @@ div.dhx_modal_cover {
}
/*Skin section*/
-
-.dhtmlx_popup_button{
+.dhtmlx_button, .dhtmlx_popup_button{
box-shadow: 0px 0px 4px #888;
border:1px solid #838383;
}
-.dhtmlx_popup_button div{
+.dhtmlx_button input, .dhtmlx_popup_button div{
border:1px solid #FFF;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
@@ -135,11 +139,17 @@ div.dhx_modal_cover {
border-radius:6px;
font-size:15px;
+ -moz-box-sizing:content-box;
+ box-sizing:content-box;
+
+ color:#fff; padding:0px; margin:0px;
+ vertical-align:top;
+
height:28px;
line-height:28px;
}
-.dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
+.dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
diff --git a/samples/05_modalbox_reuse.html b/samples/05_modalbox_reuse.html
index d4e0115..ecdd2be 100644
--- a/samples/05_modalbox_reuse.html
+++ b/samples/05_modalbox_reuse.html
@@ -30,7 +30,7 @@
-