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 @@
-
+