├── README.md
├── codebase
    ├── message.js
    └── themes
    │   ├── message_default.css
    │   ├── message_growl_dark.css
    │   ├── message_growl_shiny.css
    │   ├── message_skyblue.css
    │   └── message_solid.css
├── license.txt
└── samples
    ├── 01_info.html
    ├── 02_alert.html
    ├── 03_confirm.html
    ├── 04_skins.html
    ├── 05_modalbox.html
    ├── 05_modalbox_reuse.html
    ├── alert_medium.png
    └── alert_small.png


/README.md:
--------------------------------------------------------------------------------
  1 | jsMessage
  2 | =========
  3 | 
  4 | Custom notifications, alerts, confirmations
  5 | 
  6 | This library was extracted from code of [DHTMLX suite][dhtmlx].
  7 | 
  8 | - Library can be used under terms of [MIT license][mit] (basically **free**).
  9 | - Only **4kb** gzipped, without external dependencies.
 10 | - Works in FF, Chrome, Safari (including iPhone), Opera, IE7+
 11 | 
 12 | Live samples can be checked at [http://dhtmlx.github.com/message/][message]
 13 | 
 14 | Supported message types
 15 | -----------------------
 16 | 
 17 | jsMessage offers 4 variations at your disposal:
 18 | 
 19 | - alert
 20 | - confirm
 21 | - notification ( message )
 22 | - modalbox
 23 | 
 24 | How to use
 25 | -----------
 26 | 
 27 | The type (subtype) of the message window is specified through the parameter type. The default value is "message".
 28 | 
 29 | ```javascript
 30 | 	dhtmlx.message({ 
 31 | 	    type:"confirm-warning", 
 32 | 	    text:"Are you sure you want to do it?"
 33 | 	})
 34 | ```
 35 | 
 36 | or, you can use separate methods
 37 | 
 38 | ```javascript
 39 | 	dhtmlx.confirm({
 40 | 	    title:"Confirm",
 41 | 	    text:"Continue?"
 42 | 	});
 43 | 	//or
 44 | 	dhtmlx.alert({
 45 | 	    title:"Alert",
 46 | 	    type:"alert-error",
 47 | 	    text:"You can do this"
 48 | 	});
 49 | 	//or
 50 | 	dhtmlx.modalbox({
 51 | 	    title:"Settings",
 52 | 	    text:"Abstract popup"
 53 | 	});	
 54 | ```
 55 | 
 56 | Styling
 57 | -------
 58 | For any type of the message window you can define a custom style to achieve the desired look. 
 59 | Generally, the appropriate css class is specified through the parameter type: you define a css class and set the parameter to its name.
 60 | 
 61 | ```html
 62 | 	<style type="text/css">
 63 | 		.dhtmlx-myCss{
 64 | 			font-weight:bold !important;
 65 | 			color:white !important;
 66 | 			background-color:red !important;
 67 | 		}
 68 | 	</style>
 69 | 	<script>
 70 | 		dhtmlx.message({ type:"myCss", text:"some text" });
 71 | 	</script>
 72 | ```
 73 | 
 74 | Options
 75 | ---------
 76 | 
 77 | ### Alert
 78 | 
 79 | - title - (string) the text of the header (by default, 'Alert').
 80 | - type - the subtype of the window or a custom css class. The default value for the window - 'alert'.
 81 | - text - (string) the text of the window body.
 82 | - ok - (string) the text of the 'Ok' button.
 83 | - callback - (function) the function called on button click
 84 | - position - for now support only one value "top", any other value will result in center align
 85 | - width - width of the modal box ( samples "100px", "50%")
 86 | - height - height of the modal box 
 87 | 
 88 | **Full form**
 89 | 
 90 | ```javascript
 91 | 	dhtmlx.message({
 92 | 			title: "Close",
 93 | 	                type: "alert",
 94 | 			text: "You can't close this window!",
 95 | 			callback: function() {dhtmlx.alert("Test alert");}
 96 | 	})
 97 | //or
 98 | 	dhtmlx.alert({
 99 | 			text: "Download is completed.",
100 | 			callback: function() {dhtmlx.alert("Test alert");}
101 | 	})
102 | ```
103 | 
104 | **Short form**
105 | 
106 | ```javascript
107 | 	dhtmlx.alert("someText");
108 | ```
109 | 
110 | Both alert and confirm blocks keyboard input while active. Pressing SPACE or ENTER will close message with positive result. Pressing ESC will close message with negative result. (you can use dhtmlx.message.keyboard = false; to disable this behavior)
111 | 
112 | ### Confirm
113 | 
114 | - title - (string) the text of the header (by default, 'Alert').
115 | - type - the subtype of the window or a custom css class
116 | - text - (string) the text of the window body.
117 | - ok - (string) the text of the 'Ok' button.
118 | - cancel - (string) the text of the 'Cancel' button.
119 | - callback - (function) the function called on button click. Receives 'true' or 'false' as the parameter (subject to the clicked button).
120 | - position - for now support only one value "top", any other value will result in center align
121 | - width - width of the modal box ( samples "100px", "50%")
122 | - height - height of the modal box 
123 | 
124 | **Full form**
125 | 
126 | ```javascript
127 | 	dhtmlx.message({
128 | 		type:"confirm",
129 | 		text: "Continue?",
130 | 		callback: function() {dhtmlx.confirm("Test confirm");}
131 | 	});
132 | //or
133 | 	dhtmlx.confirm({
134 | 		title: "Close",
135 | 	            type:"confirm-warning",
136 | 		text: "Are you sure you want to do it?",
137 | 		callback: function() {dhtmlx.confirm("Test confirm");}
138 | 	});
139 | ```
140 | 
141 | **Short form**
142 | 
143 | ```javascript
144 | 	dhtmlx.confirm("ConfirmText");
145 | ```
146 | 
147 | ### ModalBox
148 | 
149 | - title - (string) the text of the header (by default, 'Alert').
150 | - type - the subtype of the window or a custom css class
151 | - text - (string) the text of the window body.
152 | - ok - (string) the text of the 'Ok' button.
153 | - cancel - (string) the text of the 'Cancel' button.
154 | - callback - (function) the function called on button click. Receives 'true' or 'false' as the parameter (subject to the clicked button).
155 | - buttons - array of labels, each one will be converted to the button ( much like multi-button confirm ). Callback function will receive index of pressed button ( 0 - for first button, 1 - for second button and etc. )
156 | - position - for now support only one value "top", any other value will result in center align
157 | - width - width of the modal box ( samples "100px", "50%")
158 | - height - height of the modal box 
159 | - content - can be used instead of text, defines html element (or its ID) which will be shown inside of a popup
160 | 
161 | **Examples**
162 | 
163 | ```javascript
164 | 	dhtmlx.modalbox({
165 | 		title:"Settings"
166 | 		text: " ... html code here... ",
167 | 		buttons:["Save", "Defaults", "Cancel"],
168 | 		callback:process_result
169 | 	});
170 | ```
171 | 
172 | function returns the html container of the box which can be used for some actions
173 | 
174 | ```javascript
175 | 	var box = dhtmlx.modalbox(...);
176 | 	box.getElementsByTagName("input")[0].focus();
177 | 	...
178 | 	dhtmlx.modalbox.hide(box); //hide popup  
179 | ```
180 | 
181 | ####  Closing modal box
182 | 
183 | There are 3 way to close modal box 
184 | 
185 | - call dhtmlx.modalbox.hide(box) - where "box" is result of dhtmlx.modalbox command
186 | - call dhtmlx.modalbox.hide(node) - where node - any html node in the box (allows to create "close" links easily)
187 | - click on any button, which was defined through "buttons" property
188 |        
189 | ```javascript
190 | 	var box = dhtmlx.modalbox({
191 | 		text:"<a href='#' onclick='dhtmlx.modalbox.hide(this)'>Click to close<a>"
192 | 	});
193 | ```
194 | 
195 | 
196 | #### Custom buttons
197 | 
198 | You can place a custom button in the popup, which is styled exactly as default message buttons. To do so you need to place the next html snippet
199 | 
200 | ```javascript
201 | 	var box = dhtmlx.modalbox({
202 | 		text:"<span class='dhtmlx_button'><input type='button' value='Press me'></span>"
203 | 	});
204 | ```
205 | 
206 | #### Content reusage
207 | 
208 | Instead of setting html text you can place any html container on the page in the modalbox
209 | 
210 | ```html
211 | 	<div id='mycontent'>Some form here </div>
212 | ```
213 | 
214 | ```javascript
215 | 	var box = dhtmlx.modalbox(content:"mycontent");
216 | ```
217 | 
218 | after box will be closed, you can reopen it by 
219 | 
220 | ```javascript
221 | 	dhtmlx.modalbox(box);
222 | ```
223 | 
224 | 
225 | ### Notification (message)
226 | 
227 | - type - the subtype of the window or a custom css class. The default value for the window - 'alert'.
228 | - text - (string) the text of the window body.
229 | - expire - the time after passing which the window disappears (in milliseconds). You can use negative value (-1) to make notice persistent. 
230 | 
231 | **Full form**
232 | 
233 | ```javascript
234 | 	dhtmlx.message({
235 | 		text:"An error has occured.<br /> Please, see the log file!",
236 | 		expire:1000, You can use negative value (-1) to make notice persistent. 
237 | 		type:"customCss" // 'customCss' - css class
238 | 	});
239 | ```
240 | 
241 | **Short form**
242 | 
243 | ```javascript
244 | 	dhtmlx.message("Your data has been successfully saved!");
245 | ```
246 | 
247 | Extra configuration
248 | -------------------
249 | 
250 | Default delay of notifications can be set as
251 | 
252 | ```javascript
253 | 	dhtmlx.message.expire = 4000; //time in milliseconds
254 | 	t.position = "top";	
255 | ```
256 | 
257 | Default position of notices can be set as
258 | 
259 | ```javascript
260 | 	dhtmlx.message.position = "top";	 // possible values "top" or "bottom"
261 | ```
262 | 
263 | 
264 | Interaction with alert and confirm from keyboard can be disabled by 
265 | 
266 | ```javascript
267 | 	dhtmlx.message.keyboard = false;	 // possible values "top" or "bottom"
268 | ```
269 | 
270 | ### Alert subtypes
271 | 
272 | For all kinds of messages, there are alert variations, which can be used for more important notifications
273 | 
274 | ```javascript
275 | 	dhtmlx.message({ type:"error", "Critical error!"});
276 | 	//or
277 | 	dhtmlx.message({ type:"alert-error", "Critical error!"});
278 | 	//or
279 | 	dhtmlx.message({ type:"confirm-error", "Confirm self-destruction!"});
280 | ```
281 | 
282 | [dhtmlx]: http://dhtmlx.com/docs/products/dhtmlxSuite/index.shtml?message
283 | [message]: http://dhtmlx.github.com/message/
284 | [mit]: http://en.wikipedia.org/wiki/MIT_License


--------------------------------------------------------------------------------
/codebase/message.js:
--------------------------------------------------------------------------------
  1 | if(!window.dhtmlx)
  2 | 	window.dhtmlx = {};
  3 | 
  4 | (function(){
  5 | 	var _dhx_msg_cfg = null;
  6 | 	function callback(config, result){
  7 | 			var usercall = config.callback;
  8 | 			modality(false);
  9 | 			config.box.parentNode.removeChild(config.box);
 10 | 			_dhx_msg_cfg = config.box = null;
 11 | 			if (usercall)
 12 | 				usercall(result);
 13 | 	}
 14 | 	function modal_key(e){
 15 | 		if (_dhx_msg_cfg){
 16 | 			e = e||event;
 17 | 			var code = e.which||event.keyCode;
 18 | 			if (dhtmlx.message.keyboard){
 19 | 				if (code == 13 || code == 32)
 20 | 					callback(_dhx_msg_cfg, true);
 21 | 				if (code == 27)
 22 | 					callback(_dhx_msg_cfg, false);
 23 | 			}
 24 | 			if (e.preventDefault)
 25 | 				e.preventDefault();
 26 | 			return !(e.cancelBubble = true);
 27 | 		}
 28 | 	}
 29 | 	if (document.attachEvent)
 30 | 		document.attachEvent("onkeydown", modal_key);
 31 | 	else
 32 | 		document.addEventListener("keydown", modal_key, true);
 33 | 		
 34 | 	function modality(mode){
 35 | 		if(!modality.cover){
 36 | 			modality.cover = document.createElement("DIV");
 37 | 			//necessary for IE only
 38 | 			modality.cover.onkeydown = modal_key;
 39 | 			modality.cover.className = "dhx_modal_cover";
 40 | 			document.body.appendChild(modality.cover);
 41 | 		}
 42 | 		var height =  document.body.scrollHeight;
 43 | 		modality.cover.style.display = mode?"inline-block":"none";
 44 | 	}
 45 | 
 46 | 	function button(text, result){
 47 | 		return "<div class='dhtmlx_popup_button' result='"+result+"' ><div>"+text+"</div></div>";
 48 | 	}
 49 | 
 50 | 	function info(text){
 51 | 		if (!t.area){
 52 | 			t.area = document.createElement("DIV");
 53 | 			t.area.className = "dhtmlx_message_area";
 54 | 			t.area.style[t.position]="5px";
 55 | 			document.body.appendChild(t.area);
 56 | 		}
 57 | 
 58 | 		t.hide(text.id);
 59 | 		var message = document.createElement("DIV");
 60 | 		message.innerHTML = "<div>"+text.text+"</div>";
 61 | 		message.className = "dhtmlx-info dhtmlx-" + text.type;
 62 | 		message.onclick = function(){
 63 | 			t.hide(text.id);
 64 | 			text = null;
 65 | 		};
 66 | 
 67 | 		if (t.position == "bottom" && t.area.firstChild)
 68 | 			t.area.insertBefore(message,t.area.firstChild);
 69 | 		else
 70 | 			t.area.appendChild(message);
 71 | 		
 72 | 		if (text.expire > 0)
 73 | 			t.timers[text.id]=window.setTimeout(function(){
 74 | 				t.hide(text.id);
 75 | 			}, text.expire);
 76 | 
 77 | 		t.pull[text.id] = message;
 78 | 		message = null;
 79 | 
 80 | 		return text.id;
 81 | 	}
 82 | 	function _boxStructure(config, ok, cancel){
 83 | 		var box = document.createElement("DIV");
 84 | 		box.className = " dhtmlx_modal_box dhtmlx-"+config.type;
 85 | 		box.setAttribute("dhxbox", 1);
 86 | 			
 87 | 		var inner = '';
 88 | 
 89 | 		if (config.width)
 90 | 			box.style.width = config.width;
 91 | 		if (config.height)
 92 | 			box.style.height = config.height;
 93 | 		if (config.title)
 94 | 			inner+='<div class="dhtmlx_popup_title">'+config.title+'</div>';
 95 | 		inner+='<div class="dhtmlx_popup_text"><span>'+(config.content?'':config.text)+'</span></div><div  class="dhtmlx_popup_controls">';
 96 | 		if (ok)
 97 | 			inner += button(config.ok || "OK", true);
 98 | 		if (cancel)
 99 | 			inner += button(config.cancel || "Cancel", false);
100 | 		if (config.buttons){
101 | 			for (var i=0; i<config.buttons.length; i++)
102 | 				inner += button(config.buttons[i],i);
103 | 		}
104 | 		inner += '</div>';
105 | 		box.innerHTML = inner;
106 | 
107 | 		if (config.content){
108 | 			var node = config.content;
109 | 			if (typeof node == "string") 
110 | 				node = document.getElementById(node);
111 | 			if (node.style.display == 'none')
112 | 				node.style.display = "";
113 | 			box.childNodes[config.title?1:0].appendChild(node);
114 | 		}
115 | 
116 | 		box.onclick = function(e){
117 | 			e = e ||event;
118 | 			var source = e.target || e.srcElement;
119 | 			if (!source.className) source = source.parentNode;
120 | 			if (source.className == "dhtmlx_popup_button"){
121 | 				var result = source.getAttribute("result");
122 | 				result = (result == "true")||(result == "false"?false:result);
123 | 				callback(config, result);
124 | 			}
125 | 		};
126 | 		config.box = box;
127 | 		if (ok||cancel)
128 | 			_dhx_msg_cfg = config;
129 | 
130 | 		return box;
131 | 	}
132 | 	function _createBox(config, ok, cancel){
133 | 		var box = config.tagName ? config : _boxStructure(config, ok, cancel);
134 | 		
135 | 		if (!config.hidden)
136 | 			modality(true);
137 | 		document.body.appendChild(box);
138 | 		var x = config.left||Math.abs(Math.floor(((window.innerWidth||document.documentElement.offsetWidth) - box.offsetWidth)/2));
139 | 		var y = config.top||Math.abs(Math.floor(((window.innerHeight||document.documentElement.offsetHeight) - box.offsetHeight)/2));
140 | 		if (config.position == "top")
141 | 			box.style.top = "-3px";
142 | 		else
143 | 			box.style.top = y+'px';
144 | 		box.style.left = x+'px';
145 | 		//necessary for IE only
146 | 		box.onkeydown = modal_key;
147 | 
148 | 		box.focus();
149 | 		if (config.hidden)
150 | 			dhtmlx.modalbox.hide(box);
151 | 
152 | 		return box;
153 | 	}
154 | 
155 | 	function alertPopup(config){
156 | 		return _createBox(config, true, false);
157 | 	}
158 | 	function confirmPopup(config){
159 | 		return _createBox(config, true, true);
160 | 	}
161 | 	function boxPopup(config){
162 | 		return _createBox(config);
163 | 	}
164 | 	function box_params(text, type, callback){
165 | 		if (typeof text != "object"){
166 | 			if (typeof type == "function"){
167 | 				callback = type;
168 | 				type = "";
169 | 			}
170 | 			text = {text:text, type:type, callback:callback };
171 | 		}
172 | 		return text;
173 | 	}
174 | 	function params(text, type, expire, id){
175 | 		if (typeof text != "object")
176 | 			text = {text:text, type:type, expire:expire, id:id};
177 | 		text.id = text.id||t.uid();
178 | 		text.expire = text.expire||t.expire;
179 | 		return text;
180 | 	}
181 | 	dhtmlx.alert = function(){
182 | 		var text = box_params.apply(this, arguments);
183 | 		text.type = text.type || "confirm";
184 | 		return alertPopup(text);
185 | 	};
186 | 	dhtmlx.confirm = function(){
187 | 		var text = box_params.apply(this, arguments);
188 | 		text.type = text.type || "alert";
189 | 		return confirmPopup(text);
190 | 	};
191 | 	dhtmlx.modalbox = function(){
192 | 		var text = box_params.apply(this, arguments);
193 | 		text.type = text.type || "alert";
194 | 		return boxPopup(text);
195 | 	};
196 | 	dhtmlx.modalbox.hide = function(node){
197 | 		while (node && node.getAttribute && !node.getAttribute("dhxbox"))
198 | 			node = node.parentNode;
199 | 		if (node){
200 | 			node.parentNode.removeChild(node);
201 | 			modality(false);
202 | 		}
203 | 	};
204 | 	var t = dhtmlx.message = function(text, type, expire, id){
205 | 		text = params.apply(this, arguments);
206 | 		text.type = text.type||"info";
207 | 
208 | 		var subtype = text.type.split("-")[0];
209 | 		switch (subtype){
210 | 			case "alert":
211 | 				return alertPopup(text);
212 | 			case "confirm":
213 | 				return confirmPopup(text);
214 | 			case "modalbox":
215 | 				return boxPopup(text);
216 | 			default:
217 | 				return info(text);
218 | 			break;
219 | 		}
220 | 	};
221 | 
222 | 	t.seed = (new Date()).valueOf();
223 | 	t.uid = function(){return t.seed++;};
224 | 	t.expire = 4000;
225 | 	t.keyboard = true;
226 | 	t.position = "top";
227 | 	t.pull = {};
228 | 	t.timers = {};
229 | 
230 | 	t.hideAll = function(){
231 | 		for (var key in t.pull)
232 | 			t.hide(key);
233 | 	};
234 | 	t.hide = function(id){
235 | 		var obj = t.pull[id];
236 | 		if (obj && obj.parentNode){
237 | 			window.setTimeout(function(){
238 | 				obj.parentNode.removeChild(obj);
239 | 				obj = null;
240 | 			},2000);
241 | 			obj.className+=" hidden";
242 | 			
243 | 			if(t.timers[id])
244 | 				window.clearTimeout(t.timers[id]);
245 | 			delete t.pull[id];
246 | 		}
247 | 	};
248 | })();


--------------------------------------------------------------------------------
/codebase/themes/message_default.css:
--------------------------------------------------------------------------------
  1 | .dhtmlx_message_area{
  2 | 	position:fixed;
  3 | 	right:5px;
  4 | 	width:250px;
  5 | 	z-index:1000;
  6 | }
  7 | 
  8 | .dhtmlx-info{
  9 | 	min-width: 120px;
 10 | 	min-height:20px;
 11 | 	padding:4px 4px 4px 20px;
 12 | 	font-family:Tahoma;
 13 | 	z-index: 10000;
 14 | 
 15 | 	margin:5px;
 16 | 	margin-bottom:10px;
 17 | 
 18 | 	-webkit-transition: all .5s ease;
 19 |     -moz-transition: all .5s ease;
 20 |     -o-transition: all .5s ease;
 21 |     transition: all .5s ease;
 22 | }
 23 | .dhtmlx-info.hidden{
 24 | 	height:0px;
 25 | 	min-height: 0px;
 26 | 	padding-top:0px;
 27 | 	padding-bottom:0px;
 28 | 	border-width:0px;
 29 | 	margin-top:0px;
 30 | 	margin-bottom:0px;
 31 | 	overflow:hidden;
 32 | }
 33 | 
 34 | .dhtmlx_modal_box{
 35 | 	overflow:hidden;
 36 | 	display: inline-block;
 37 | 	min-width: 300px;
 38 | 	width: 300px;
 39 | 	text-align: center;
 40 | 	position:fixed;
 41 | 
 42 | 	background-color: #fff;
 43 | 	background:-webkit-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 44 | 	background:-moz-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 45 | 	box-shadow: 0px 0px 14px #888;
 46 | 
 47 | 	font-family: Tahoma;
 48 | 
 49 | 	z-index:20000;
 50 | 
 51 | 	border-radius:6px;
 52 | 	border: 1px solid #ffffff;
 53 | }
 54 | 
 55 | .dhtmlx_popup_title{
 56 | 	border-top-left-radius:5px;
 57 | 	border-top-right-radius:5px;
 58 | 
 59 | 	border-width:0px;
 60 | 	
 61 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAMAAAAIaGBFAAAAhFBMVEVwcHBubm5sbGxqampoaGhmZmZlZWVjY2NhYWFfX19dXV1bW1taWlpYWFhWVlZUVFRSUlJRUVFPT09NTU1LS0tJSUlHR0dGRkZERERCQkJAQEA+Pj49PT09PT0+Pj5AQEBBQUFDQ0NERERGRkZHR0dJSUlKSkpMTExMTEw5OTk5OTk5OTkny8YEAAAAQklEQVQImQXBCRJCAAAAwKVSQqdyjSPXNP7/QLsIhA6OTiJnF7GrRCpzc/fw9PKW+/gqlCq1RqvTG/yMJrPF6m/bAVEhAxxnHG0oAAAAAElFTkSuQmCC);
 62 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 63 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 64 | }
 65 | 
 66 | .dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
 67 | 	user-select: none;
 68 | 	-webkit-user-select: none;
 69 | 	-moz-user-select:-moz-none;
 70 | 
 71 | 	cursor:pointer;
 72 | }
 73 | 
 74 | .dhtmlx_popup_text{
 75 | 	overflow:hidden;
 76 | }
 77 | 
 78 | .dhtmlx_popup_controls{
 79 | 	border-radius:6px;
 80 | 	padding:5px;
 81 | }
 82 | 
 83 | .dhtmlx_popup_button, .dhtmlx_button{
 84 | 	height: 30px;
 85 | 	line-height:30px;
 86 | 
 87 | 	display: inline-block;
 88 | 	margin: 0 5px;
 89 | 	border-radius: 6px;
 90 | 
 91 | 	color:#FFF;
 92 | }
 93 | .dhtmlx_popup_button{
 94 | 	min-width: 120px;
 95 | }
 96 | 
 97 | div.dhx_modal_cover {
 98 | 	background-color:#000;
 99 | 	cursor:default;
100 | 
101 | 	filter:alpha(opacity = 20);
102 | 	opacity: 0.2;
103 | 
104 | 	position: fixed;
105 | 	z-index:19999;
106 | 	left: 0px;		top: 0px;
107 | 	width: 100%;	height: 100%;
108 | 
109 | 	border: none;
110 | 	zoom: 1;
111 | }
112 | 
113 | .dhtmlx-info img, .dhtmlx_modal_box img{
114 | 	float:left;
115 | 	margin-right:20px;
116 | }
117 | 
118 | .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{
119 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAATklEQVR4nIWLuw2AMBBDjVuQiBT2oWbRDATrnB0KQOJoqPzRe3BrHI6dcBASYREKovtK6/6DsDOX+stN+3H1YX9ciRgnYq5EWYhS2dftBIuLT4JyIrPCAAAAAElFTkSuQmCC);
120 | }
121 | .dhtmlx-alert-error, .dhtmlx-confirm-error {
122 | 	border: 1px solid #ff0000;
123 | }
124 | 
125 | /*Skin section*/
126 | .dhtmlx_button, .dhtmlx_popup_button{
127 | 	box-shadow: 0px 0px 4px #888;
128 | 	border:1px solid #838383;
129 | }
130 | .dhtmlx_button input, .dhtmlx_popup_button div{
131 | 	border:1px solid #FFF;
132 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
133 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
134 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
135 | 
136 | 	border-radius:6px;
137 | 	font-size:15px;
138 | 	font-weight:normal; 
139 | 	-moz-box-sizing:content-box;
140 | 	box-sizing:content-box;
141 | 
142 | 	color:#fff; padding:0px; margin:0px;
143 | 	vertical-align:top;
144 | 
145 | 	height:28px;
146 | 	line-height:28px;
147 | }
148 | 
149 | .dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
150 | 
151 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
152 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
153 | 	background-image: -moz-linear-gradient(top, #707070 1%, #4c4c4c 99%);	
154 | }
155 | .dhtmlx_popup_title{
156 | 	color:#fff;
157 | 	text-shadow: 1px 1px #000;
158 | 	height:40px; line-height:40px;
159 | 	font-size:20px;
160 | }
161 | .dhtmlx_popup_text{
162 | 	margin:15px 15px 5px 15px;
163 | 	font-size:14px;
164 | 	color:#000;
165 | 	min-height:30px;
166 | 	border-radius:6px;
167 | }
168 | 
169 | 
170 | .dhtmlx-info, .dhtmlx-error{
171 | 	font-size:14px;
172 | 	color:#000;
173 | 	box-shadow: 0px 0px 10px #888;
174 | 	
175 | 	padding:0px;
176 | 	
177 |   	background-color:#FFF;
178 | 	border-radius:3px;
179 | 	border:1px solid #ffffff;
180 | }
181 | .dhtmlx-info div{
182 | 	padding:5px 10px 5px 10px;
183 | 	background-color: #fff;
184 | 
185 | 	border-radius:3px;
186 | 	border:1px solid #B8B8B8;
187 | }
188 | .dhtmlx-error{
189 | 	background-color: #d81b1b;
190 | 	border:1px solid #ff3c3c;
191 | 	box-shadow: 0px 0px 10px #000;
192 | }
193 | .dhtmlx-error div{
194 | 	background-color: #d81b1b;	
195 | 	border:1px solid #940000;
196 | 	color:#FFF;
197 | }
198 | 
199 | 


--------------------------------------------------------------------------------
/codebase/themes/message_growl_dark.css:
--------------------------------------------------------------------------------
  1 | .dhtmlx_message_area{
  2 | 	position:fixed;
  3 | 	right:5px;
  4 | 	width:250px;
  5 | 	z-index:1000;
  6 | }
  7 | 
  8 | .dhtmlx-info{
  9 | 	min-width: 120px;
 10 | 	min-height: 20px;
 11 | 	padding:4px 4px 4px 20px;
 12 | 	font-family:Tahoma;
 13 | 	z-index: 10000;
 14 | 
 15 | 	margin:5px;
 16 | 	margin-bottom:10px;
 17 | 
 18 | 	-webkit-transition: all .5s ease;
 19 |     -moz-transition: all .5s ease;
 20 |     -o-transition: all .5s ease;
 21 |     transition: all .5s ease;
 22 | }
 23 | .dhtmlx-info.hidden{
 24 | 	height:0px;
 25 | 	min-height: 0px;
 26 | 	padding-top:0px;
 27 | 	padding-bottom:0px;
 28 | 	border-width:0px;
 29 | 	margin-top:0px;
 30 | 	margin-bottom:0px;
 31 | 	overflow:hidden;
 32 | }
 33 | 
 34 | .dhtmlx_modal_box{
 35 | 	overflow:hidden;
 36 | 	display: inline-block;
 37 | 	min-width: 300px;
 38 | 	width: 300px;
 39 | 	text-align: center;
 40 | 	position:fixed;
 41 | 
 42 | 	background-color: #fff;
 43 | 	background:-webkit-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 44 | 	background:-moz-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 45 | 	box-shadow: 0px 0px 14px #888;
 46 | 
 47 | 	font-family: Tahoma;
 48 | 
 49 | 	z-index:20000;
 50 | 
 51 | 	border-radius:6px;
 52 | 	border: 1px solid #ffffff;
 53 | }
 54 | 
 55 | .dhtmlx_popup_title{
 56 | 	border-top-left-radius:5px;
 57 | 	border-top-right-radius:5px;
 58 | 
 59 | 	border-width:0px;
 60 | 	
 61 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAMAAAAIaGBFAAAAhFBMVEVwcHBubm5sbGxqampoaGhmZmZlZWVjY2NhYWFfX19dXV1bW1taWlpYWFhWVlZUVFRSUlJRUVFPT09NTU1LS0tJSUlHR0dGRkZERERCQkJAQEA+Pj49PT09PT0+Pj5AQEBBQUFDQ0NERERGRkZHR0dJSUlKSkpMTExMTEw5OTk5OTk5OTkny8YEAAAAQklEQVQImQXBCRJCAAAAwKVSQqdyjSPXNP7/QLsIhA6OTiJnF7GrRCpzc/fw9PKW+/gqlCq1RqvTG/yMJrPF6m/bAVEhAxxnHG0oAAAAAElFTkSuQmCC);
 62 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 63 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 64 | }
 65 | 
 66 | .dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
 67 | 	user-select: none;
 68 | 	-webkit-user-select: none;
 69 | 	-moz-user-select:-moz-none;
 70 | 
 71 | 	cursor:pointer;
 72 | }
 73 | 
 74 | .dhtmlx_popup_text{
 75 | 	overflow:hidden;
 76 | }
 77 | 
 78 | .dhtmlx_popup_controls{
 79 | 	border-radius:6px;
 80 | 	padding:5px;
 81 | }
 82 | 
 83 | .dhtmlx_popup_button, .dhtmlx_button{
 84 | 	height: 30px;
 85 | 	line-height:30px;
 86 | 
 87 | 	display: inline-block;
 88 | 	margin: 0 5px;
 89 | 	border-radius: 6px;
 90 | 
 91 | 	color:#FFF;
 92 | }
 93 | .dhtmlx_popup_button{
 94 | 	min-width: 120px;
 95 | }
 96 | 
 97 | div.dhx_modal_cover {
 98 | 	background-color:#000;
 99 | 	cursor:default;
100 | 
101 | 	filter:alpha(opacity = 20);
102 | 	opacity: 0.2;
103 | 
104 | 	position: fixed;
105 | 	z-index:19999;
106 | 	left: 0px;		top: 0px;
107 | 	width: 100%;	height: 100%;
108 | 
109 | 	border: none;
110 | 	zoom: 1;
111 | }
112 | 
113 | .dhtmlx-info img, .dhtmlx_modal_box img{
114 | 	float:left;
115 | 	margin-right:20px;
116 | }
117 | .dhtmlx-info img{
118 | 	margin-left:-10px;
119 | }
120 | 
121 | .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{
122 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAATklEQVR4nIWLuw2AMBBDjVuQiBT2oWbRDATrnB0KQOJoqPzRe3BrHI6dcBASYREKovtK6/6DsDOX+stN+3H1YX9ciRgnYq5EWYhS2dftBIuLT4JyIrPCAAAAAElFTkSuQmCC);
123 | }
124 | .dhtmlx-alert-error, .dhtmlx-confirm-error {
125 | 	border: 1px solid #ff0000;
126 | }
127 | 
128 | /*Skin section*/
129 | .dhtmlx_button, .dhtmlx_popup_button{
130 | 	box-shadow: 0px 0px 4px #888;
131 | 	border:1px solid #838383;
132 | }
133 | .dhtmlx_button input, .dhtmlx_popup_button div{
134 | 	border:1px solid #FFF;
135 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
136 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
137 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
138 | 
139 | 	border-radius:6px;
140 | 	font-size:15px;
141 | 
142 | 	-moz-box-sizing:content-box;
143 | 	box-sizing:content-box;
144 | 
145 | 	color:#fff; padding:0px; margin:0px;
146 | 	vertical-align:top;
147 | 
148 | 	height:28px;
149 | 	line-height:28px;
150 | }
151 | 
152 | .dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
153 | 	
154 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
155 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
156 | 	background-image: -moz-linear-gradient(top, #707070 1%, #4c4c4c 99%);	
157 | }
158 | .dhtmlx_popup_title{
159 | 	color:#fff;
160 | 	text-shadow: 1px 1px #000;
161 | 	height:40px; line-height:40px;
162 | 	font-size:20px;
163 | }
164 | .dhtmlx_popup_text{
165 | 	margin:15px 15px 5px 15px;
166 | 	font-size:14px;
167 | 	color:#000;
168 | 	min-height:30px;
169 | 	border-radius:6px;
170 | }
171 | 
172 | 
173 | .dhtmlx-info, .dhtmlx-error{
174 |         font-size:14px;
175 | 	color:#fff;
176 | 	box-shadow: 0px 0px 4px #000;
177 | 	margin-bottom:10px;
178 | 
179 | 	background-color:#000;
180 | 	background-color:rgba(0,0,0,0.8);
181 | 	border-radius:5px;
182 | 	border:2px solid #fff;
183 | }
184 | 
185 | .dhtmlx-error{
186 | 	background-color:#F00;
187 | }
188 | 


--------------------------------------------------------------------------------
/codebase/themes/message_growl_shiny.css:
--------------------------------------------------------------------------------
  1 | .dhtmlx_message_area{
  2 | 	position:fixed;
  3 | 	right:5px;
  4 | 	width:250px;
  5 | 	z-index:1000;
  6 | }
  7 | 
  8 | .dhtmlx-info{
  9 | 	min-width: 120px;
 10 | 	min-height: 20px;
 11 | 	padding:4px 4px 4px 20px;
 12 | 	font-family:Tahoma;
 13 | 	z-index: 10000;
 14 | 
 15 | 	margin:5px;
 16 | 	margin-bottom:10px;
 17 | 
 18 | 	-webkit-transition: all .5s ease;
 19 |     -moz-transition: all .5s ease;
 20 |     -o-transition: all .5s ease;
 21 |     transition: all .5s ease;
 22 | }
 23 | .dhtmlx-info.hidden{
 24 | 	height:0px;
 25 | 	min-height: 0px;
 26 | 	padding-top:0px;
 27 | 	padding-bottom:0px;
 28 | 	border-width:0px;
 29 | 	margin-top:0px;
 30 | 	margin-bottom:0px;
 31 | 	overflow:hidden;
 32 | }
 33 | 
 34 | .dhtmlx_modal_box{
 35 | 	overflow:hidden;
 36 | 	display: inline-block;
 37 | 	min-width: 300px;
 38 | 	width: 300px;
 39 | 	text-align: center;
 40 | 	position:fixed;
 41 | 
 42 | 	background-color: #fff;
 43 | 	background:-webkit-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 44 | 	background:-moz-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 45 | 	box-shadow: 0px 0px 14px #888;
 46 | 
 47 | 	font-family: Tahoma;
 48 | 
 49 | 	z-index:20000;
 50 | 
 51 | 	border-radius:6px;
 52 | 	border: 1px solid #ffffff;
 53 | }
 54 | 
 55 | .dhtmlx_popup_title{
 56 | 	border-top-left-radius:5px;
 57 | 	border-top-right-radius:5px;
 58 | 
 59 | 	border-width:0px;
 60 | 	
 61 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAMAAAAIaGBFAAAAhFBMVEVwcHBubm5sbGxqampoaGhmZmZlZWVjY2NhYWFfX19dXV1bW1taWlpYWFhWVlZUVFRSUlJRUVFPT09NTU1LS0tJSUlHR0dGRkZER
 62 | 		ERCQkJAQEA+Pj49PT09PT0+Pj5AQEBBQUFDQ0NERERGRkZHR0dJSUlKSkpMTExMTEw5OTk5OTk5OTkny8YEAAAAQklEQVQImQXBCRJCAAAAwKVSQqdyjSPXNP7/QLsIhA6OTiJnF7GrRCpzc/fw9PKW+/gqlCq1RqvTG/yMJrPF6m/bAVEhAxxnHG0oAAAAAElFTkSuQmCC);
 63 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 64 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 65 | }
 66 | 
 67 | .dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
 68 | 	user-select: none;
 69 | 	-webkit-user-select: none;
 70 | 	-moz-user-select:-moz-none;
 71 | 
 72 | 	cursor:pointer;
 73 | }
 74 | 
 75 | .dhtmlx_popup_text{
 76 | 	overflow:hidden;
 77 | }
 78 | 
 79 | .dhtmlx_popup_controls{
 80 | 	border-radius:6px;
 81 | 	padding:5px;
 82 | }
 83 | 
 84 | .dhtmlx_popup_button, .dhtmlx_button{
 85 | 	height: 30px;
 86 | 	line-height:30px;
 87 | 
 88 | 	display: inline-block;
 89 | 	margin: 0 5px;
 90 | 	border-radius: 6px;
 91 | 
 92 | 	color:#FFF;
 93 | }
 94 | .dhtmlx_popup_button{
 95 | 	min-width: 120px;
 96 | }
 97 | 
 98 | div.dhx_modal_cover {
 99 | 	background-color:#000;
100 | 	cursor:default;
101 | 
102 | 	filter:alpha(opacity = 20);
103 | 	opacity: 0.2;
104 | 
105 | 	position: fixed;
106 | 	z-index:19999;
107 | 	left: 0px;		top: 0px;
108 | 	width: 100%;	height: 100%;
109 | 
110 | 	border: none;
111 | 	zoom: 1;
112 | }
113 | 
114 | .dhtmlx-info img, .dhtmlx_modal_box img{
115 | 	float:left;
116 | 	margin-right:20px;
117 | }
118 | .dhtmlx-info img{
119 | 	margin-left:-10px;
120 | }
121 | 
122 | .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{
123 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAATklEQVR4nIWLuw2AMBBDjVuQiBT2oWbRDATrnB0KQOJoqPzRe3BrHI6dcBASYREKovtK6/6DsDOX+stN+3H1YX9ciRgnYq5EWYhS2dftBIuLT4JyIrPCAAAAAElFTkSuQmCC);
124 | }
125 | .dhtmlx-alert-error, .dhtmlx-confirm-error {
126 | 	border: 1px solid #ff0000;
127 | }
128 | 
129 | /*Skin section*/
130 | .dhtmlx_button, .dhtmlx_popup_button{
131 | 	box-shadow: 0px 0px 4px #888;
132 | 	border:1px solid #838383;
133 | }
134 | .dhtmlx_button input, .dhtmlx_popup_button div{
135 | 	border:1px solid #FFF;
136 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
137 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
138 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
139 | 
140 | 	border-radius:6px;
141 | 	font-size:15px;
142 | 
143 | 	-moz-box-sizing:content-box;
144 | 	box-sizing:content-box;
145 | 
146 | 	color:#fff; padding:0px; margin:0px;
147 | 	vertical-align:top;
148 | 
149 | 	height:28px;
150 | 	line-height:28px;
151 | }
152 | 
153 | .dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
154 | 	
155 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
156 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
157 | 	background-image: -moz-linear-gradient(top, #707070 1%, #4c4c4c 99%);	
158 | }
159 | .dhtmlx_popup_title{
160 | 	color:#fff;
161 | 	text-shadow: 1px 1px #000;
162 | 	height:40px; line-height:40px;
163 | 	font-size:20px;
164 | }
165 | .dhtmlx_popup_text{
166 | 	margin:15px 15px 5px 15px;
167 | 	font-size:14px;
168 | 	color:#000;
169 | 	min-height:30px;
170 | 	border-radius:6px;
171 | }
172 | 
173 | 
174 | .dhtmlx-info, .dhtmlx-error{
175 | 	font-size:14px;
176 | 	color:#000;
177 | 	box-shadow: 0px 0px 4px #fff;
178 | 	margin-bottom:10px;
179 | 
180 | 	background-color:#fff;
181 | 			  
182 | 	border-radius:5px;
183 | 	border:2px solid #000;
184 | }
185 | 
186 | .dhtmlx-error{
187 | 	background-color:#F00;
188 | 	color:white;
189 | }
190 | 


--------------------------------------------------------------------------------
/codebase/themes/message_skyblue.css:
--------------------------------------------------------------------------------
  1 | .dhtmlx_message_area{
  2 | 	position:fixed;
  3 | 	right:5px;
  4 | 	width:250px;
  5 | 	z-index:1000;
  6 | }
  7 | 
  8 | .dhtmlx-info{
  9 | 	min-width: 120px;
 10 | 	min-height: 20px;
 11 | 	padding:4px 4px 4px 20px;
 12 | 	font-family:Tahoma;
 13 | 	z-index: 10000;
 14 | 
 15 | 	margin:5px;
 16 | 	margin-bottom:10px;
 17 | 
 18 | 	-webkit-transition: all .5s ease;
 19 |     -moz-transition: all .5s ease;
 20 |     -o-transition: all .5s ease;
 21 |     transition: all .5s ease;
 22 | }
 23 | .dhtmlx-info.hidden{
 24 | 	height:0px;
 25 | 	min-height: 0px;
 26 | 	padding-top:0px;
 27 | 	padding-bottom:0px;
 28 | 	border-width:0px;
 29 | 	margin-top:0px;
 30 | 	margin-bottom:0px;
 31 | 	overflow:hidden;
 32 | }
 33 | 
 34 | .dhtmlx_modal_box{
 35 | 	overflow:hidden;
 36 | 	display: inline-block;
 37 | 	min-width: 300px;
 38 | 	width: 300px;
 39 | 	text-align: center;
 40 | 	position:fixed;
 41 | 
 42 | 	background-color: #fff;
 43 | 	background:-webkit-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 44 | 	background:-moz-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 45 | 	box-shadow: 0px 0px 14px #888;
 46 | 
 47 | 	font-family: Tahoma;
 48 | 
 49 | 	z-index:20000;
 50 | 
 51 | 	border-radius:6px;
 52 | 	border: 1px solid #ffffff;
 53 | }
 54 | 
 55 | .dhtmlx_popup_title{
 56 | 	border-top-left-radius:5px;
 57 | 	border-top-right-radius:5px;
 58 | 
 59 | 	border-width:0px;
 60 | 	background-color: #4c4c4c;
 61 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAARElEQVR4nH3MMQqAQBQD0dnZBTvvf80tBBEhNh9EFKuERwhz2z3OGDA0EwxI5aelvDq/hkn54+O210dtujjEYXN0XJdc1CE1MA5mcdsAAAAASUVORK5CYII=);
 62 | }
 63 | 
 64 | .dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
 65 | 	user-select: none;
 66 | 	-webkit-user-select: none;
 67 | 	-moz-user-select:-moz-none;
 68 | 
 69 | 	cursor:pointer;
 70 | }
 71 | 
 72 | .dhtmlx_popup_text{
 73 | 	overflow:hidden;
 74 | }
 75 | 
 76 | .dhtmlx_popup_controls{
 77 | 	border-radius:6px;
 78 | 	padding:5px;
 79 | }
 80 | 
 81 | .dhtmlx_popup_button, .dhtmlx_button{
 82 | 	height: 30px;
 83 | 	line-height:30px;
 84 | 
 85 | 	display: inline-block;
 86 | 	margin: 0 5px;
 87 | 	border-radius: 6px;
 88 | 
 89 | 	color:#FFF;
 90 | }
 91 | .dhtmlx_popup_button{
 92 | 	min-width: 120px;
 93 | }
 94 | 
 95 | div.dhx_modal_cover {
 96 | 	background-color:#000;
 97 | 	cursor:default;
 98 | 
 99 | 	filter:alpha(opacity = 20);
100 | 	opacity: 0.2;
101 | 
102 | 	position: fixed;
103 | 	z-index:19999;
104 | 	left: 0px;		top: 0px;
105 | 	width: 100%;	height: 100%;
106 | 
107 | 	border: none;
108 | 	zoom: 1;
109 | }
110 | 
111 | .dhtmlx-info img, .dhtmlx_modal_box img{
112 | 	float:left;
113 | 	margin-right:20px;
114 | }
115 | .dhtmlx-info img{
116 | 	margin-left:-10px;
117 | }
118 | 
119 | .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{
120 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAATklEQVR4nIWLuw2AMBBDjVuQiBT2oWbRDATrnB0KQOJoqPzRe3BrHI6dcBASYREKovtK6/6DsDOX+stN+3H1YX9ciRgnYq5EWYhS2dftBIuLT4JyIrPCAAAAAElFTkSuQmCC);
121 | }
122 | .dhtmlx-alert-error, .dhtmlx-confirm-error {
123 | 	border: 1px solid #ff0000;
124 | }
125 | 
126 | /*Skin section*/
127 | .dhtmlx_button, .dhtmlx_popup_button{
128 | 	box-shadow: 0px 0px 4px #888;
129 | 	border:1px solid #838383;
130 | }
131 | .dhtmlx_button input, .dhtmlx_popup_button div{
132 | 	border:1px solid #FFF;
133 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAQElEQVR4nE3LMQ7AIAxD0R9TxP3PydalW8xAQJ0i2y/M95ONTOxrlCC7MigdMtz92LxdlKPc/3d7jPqDRgv1xgLuDiwEIl5MZQAAAABJRU5ErkJggg==);
134 | 	color:#000;
135 | 	border-radius:6px;
136 | 	font-size:15px;
137 | 
138 | 	-moz-box-sizing:content-box;
139 | 	box-sizing:content-box;
140 | 
141 | 	color:#000; padding:0px; margin:0px;
142 | 	vertical-align:top;
143 | 
144 | 	height:28px;
145 | 	line-height:28px;
146 | }
147 | 
148 | .dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
149 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAARklEQVR4nE2LMQ6AIADEykUG3Nz9/yf4Ar8g7K4Oeg4KOFxyTVNyqUrbLoMwAgt4+dt0nT0+IP/cbD0ag0JAabm1xkvn0R7oABW07Ic3sQAAAABJRU5ErkJggg==);
150 | }
151 | .dhtmlx_popup_title{
152 | 	color:#000;
153 | 	
154 | 	height:40px; line-height:40px;
155 | 	font-size:20px;
156 | }
157 | .dhtmlx_popup_text{
158 | 	margin:15px 15px 5px 15px;
159 | 	font-size:14px;
160 | 	color:#000;
161 | 	min-height:30px;
162 | 	border-radius:6px;
163 | }
164 | 
165 | 
166 | .dhtmlx-info, .dhtmlx-error{
167 | 	font-size:14px;
168 | 	color:#000;
169 | 	box-shadow: 0px 0px 4px #000;
170 | 	margin-bottom:10px;
171 | 	
172 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAARElEQVR4nH3MMQqAQBQD0dnZBTvvf80tBBEhNh9EFKuERwhz2z3OGDA0EwxI5aelvDq/hkn54+O210dtujjEYXN0XJdc1CE1MA5mcdsAAAAASUVORK5CYII=);
173 | 
174 |   	background-color:rgba(0,0,0,0.8);
175 | 	border-radius:5px;
176 | 	border:2px solid #fff;
177 | }
178 | 
179 | .dhtmlx-error{
180 | 	color:red;
181 | }
182 | 


--------------------------------------------------------------------------------
/codebase/themes/message_solid.css:
--------------------------------------------------------------------------------
  1 | .dhtmlx_message_area{
  2 | 	position:fixed;
  3 | 	right:5px;
  4 | 	width:250px;
  5 | 	z-index:1000;
  6 | }
  7 | 
  8 | .dhtmlx-info{
  9 | 	min-width: 120px;
 10 | 	min-height: 20px;
 11 | 	padding:4px 4px 4px 20px;
 12 | 	font-family:Tahoma;
 13 | 	z-index: 10000;
 14 | 
 15 | 	margin:5px;
 16 | 	margin-bottom:10px;
 17 | 
 18 | 	-webkit-transition: all .5s ease;
 19 |     -moz-transition: all .5s ease;
 20 |     -o-transition: all .5s ease;
 21 |     transition: all .5s ease;
 22 | }
 23 | .dhtmlx-info.hidden{
 24 | 	height:0px;
 25 | 	min-height: 0px;
 26 | 	padding-top:0px;
 27 | 	padding-bottom:0px;
 28 | 	border-width:0px;
 29 | 	margin-top:0px;
 30 | 	margin-bottom:0px;
 31 | 	overflow:hidden;
 32 | }
 33 | 
 34 | .dhtmlx_modal_box{
 35 | 	overflow:hidden;
 36 | 	display: inline-block;
 37 | 	min-width: 300px;
 38 | 	width: 300px;
 39 | 	text-align: center;
 40 | 	position:fixed;
 41 | 
 42 | 	background-color: #fff;
 43 | 	background:-webkit-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 44 | 	background:-moz-linear-gradient(top, #ffffff 1%, #d0d0d0 99%);
 45 | 	box-shadow: 0px 0px 14px #888;
 46 | 
 47 | 	font-family: Tahoma;
 48 | 
 49 | 	z-index:20000;
 50 | 
 51 | 	border-radius:6px;
 52 | 	border: 1px solid #ffffff;
 53 | }
 54 | 
 55 | .dhtmlx_popup_title{
 56 | 	border-top-left-radius:5px;
 57 | 	border-top-right-radius:5px;
 58 | 
 59 | 	border-width:0px;
 60 | 	
 61 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAMAAAAIaGBFAAAAhFBMVEVwcHBubm5sbGxqampoaGhmZmZlZWVjY2NhYWFfX19dXV1bW1taWlpYWFhWVlZUVFRSUlJRUVFPT09NTU1LS0tJSUlHR0dGRkZERERCQkJAQEA+Pj49PT09PT0+Pj5AQEBBQUFDQ0NERERGRkZHR0dJSUlKSkpMTExMTEw5OTk5OTk5OTkny8YEAAAAQklEQVQImQXBCRJCAAAAwKVSQqdyjSPXNP7/QLsIhA6OTiJnF7GrRCpzc/fw9PKW+/gqlCq1RqvTG/yMJrPF6m/bAVEhAxxnHG0oAAAAAElFTkSuQmCC);
 62 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 63 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 97%, #393939 97%);
 64 | }
 65 | 
 66 | .dhtmlx-info, .dhtmlx_popup_button, .dhtmlx_button{
 67 | 	user-select: none;
 68 | 	-webkit-user-select: none;
 69 | 	-moz-user-select:-moz-none;
 70 | 
 71 | 	cursor:pointer;
 72 | }
 73 | 
 74 | .dhtmlx_popup_text{
 75 | 	overflow:hidden;
 76 | }
 77 | 
 78 | .dhtmlx_popup_controls{
 79 | 	border-radius:6px;
 80 | 	padding:5px;
 81 | }
 82 | 
 83 | .dhtmlx_popup_button, .dhtmlx_button{
 84 | 	height: 30px;
 85 | 	line-height:30px;
 86 | 
 87 | 	display: inline-block;
 88 | 	margin: 0 5px;
 89 | 	border-radius: 6px;
 90 | 
 91 | 	color:#FFF;
 92 | }
 93 | .dhtmlx_popup_button{
 94 | 	min-width: 120px;
 95 | }
 96 | 
 97 | div.dhx_modal_cover {
 98 | 	background-color:#000;
 99 | 	cursor:default;
100 | 
101 | 	filter:alpha(opacity = 20);
102 | 	opacity: 0.2;
103 | 
104 | 	position: fixed;
105 | 	z-index:19999;
106 | 	left: 0px;		top: 0px;
107 | 	width: 100%;	height: 100%;
108 | 
109 | 	border: none;
110 | 	zoom: 1;
111 | }
112 | 
113 | .dhtmlx-info img, .dhtmlx_modal_box img{
114 | 	float:left;
115 | 	margin-right:20px;
116 | }
117 | .dhtmlx-info img{
118 | 	margin-left:-10px;
119 | }
120 | 
121 | .dhtmlx-alert-error .dhtmlx_popup_title, .dhtmlx-confirm-error .dhtmlx_popup_title{
122 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAsCAIAAAArRUU2AAAATklEQVR4nIWLuw2AMBBDjVuQiBT2oWbRDATrnB0KQOJoqPzRe3BrHI6dcBASYREKovtK6/6DsDOX+stN+3H1YX9ciRgnYq5EWYhS2dftBIuLT4JyIrPCAAAAAElFTkSuQmCC);
123 | }
124 | .dhtmlx-alert-error, .dhtmlx-confirm-error {
125 | 	border: 1px solid #ff0000;
126 | }
127 | 
128 | /*Skin section*/
129 | .dhtmlx_button, .dhtmlx_popup_button{
130 | 	box-shadow: 0px 0px 4px #888;
131 | 	border:1px solid #838383;
132 | }
133 | .dhtmlx_button input, .dhtmlx_popup_button div{
134 | 	border:1px solid #FFF;
135 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAYFBMVEVwcHBtbW1ra2toaGhmZmZjY2NhYWFeXl5cXFxaWlpXV1dVVVVSUlJQUFBNTU1LS0tJSUlGRkZERERBQUE/Pz88PDw9PT0+Pj5AQEBCQkJDQ0NFRUVHR0dISEhKSkpMTEzqthaMAAAAMklEQVQImQXBhQ2AMAAAsOIMlwWH/8+kRSKVyRVKlVrQaHV6g9FktlhFm93hdLk9Xt8PIfgBvdUqyskAAAAASUVORK5CYII=);
136 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
137 | 	background-image: -moz-linear-gradient(top, #707070 1%, #3d3d3d 70%, #4c4c4c 99%);
138 | 
139 | 	border-radius:6px;
140 | 	font-size:15px;
141 | 
142 | 	-moz-box-sizing:content-box;
143 | 	box-sizing:content-box;
144 | 
145 | 	color:#fff; padding:0px; margin:0px;
146 | 	vertical-align:top;
147 | 
148 | 	height:28px;
149 | 	line-height:28px;
150 | }
151 | 
152 | .dhtmlx_button input:focus, .dhtmlx_button input:active, .dhtmlx_popup_button div:active, .dhtmlx_popup_button div:focus{
153 | 	
154 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAAXVBMVEVwcHBubm5tbW1sbGxra2tpaWloaGhnZ2dmZmZlZWVjY2NiYmJhYWFgYGBfX19dXV1cXFxbW1taWlpZWVlXV1dWVlZVVVVUVFRTU1NRUVFQUFBPT09OTk5NTU1LS0tT9SY0AAAAMUlEQVQImQXBhQGAMAAAIGxnx2z9/00BiVQmVyhVakGj1ekNRpPZYhVtdofT5fZ4fT8hpwG05JjexgAAAABJRU5ErkJggg==);
155 | 	background-image: -webkit-linear-gradient(top, #707070 1%, #4c4c4c 99%);
156 | 	background-image: -moz-linear-gradient(top, #707070 1%, #4c4c4c 99%);	
157 | }
158 | .dhtmlx_popup_title{
159 | 	color:#fff;
160 | 	text-shadow: 1px 1px #000;
161 | 	height:40px; line-height:40px;
162 | 	font-size:20px;
163 | }
164 | .dhtmlx_popup_text{
165 | 	margin:15px 15px 5px 15px;
166 | 	font-size:14px;
167 | 	color:#000;
168 | 	min-height:30px;
169 | 	border-radius:6px;
170 | }
171 | 
172 | 
173 | .dhtmlx-info, .dhtmlx-error{
174 | 	font-size:14px;
175 | 	color:#fff;
176 | 	box-shadow: 0 4px 4px -4px #000;
177 | 
178 | 	border-radius:5px;
179 | 
180 | 	background-color:#000;
181 | 	background-color:rgba(0,0,0,0.8);
182 | }
183 | 
184 | .dhtmlx-error{
185 | 	color:#F00;
186 | }
187 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2011 by dhtmlx.com
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.


--------------------------------------------------------------------------------
/samples/01_info.html:
--------------------------------------------------------------------------------
 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 | 		.dhtmlx-error{
 9 | 			font-weight:bold;
10 | 			color:white;
11 | 			background-color:red;
12 | 		}
13 | 		body, html {
14 | 			height:100%;
15 | 		}
16 | 		input{
17 | 			width:300px;
18 | 			display:block;
19 | 			font-family:Tahoma;
20 | 			font-size:12pt;
21 | 			padding:5px 20px;
22 | 		}
23 | 	</style>
24 | </head>
25 | <body>
26 | 	<input type='button' value='Show message' onclick='dhtmlx.message("You have pressed the button!")'> 
27 | 	<input type='button' value='Show message with custom style' onclick='dhtmlx.message({ type:"error", text:"You have pressed the <br> CRITICAL button!" })'> 
28 | 	<input type='button' value='Persistent message' onclick='dhtmlx.message({ expire:-1, text:"Click on me to close" })'> 
29 | 	<br>
30 | 
31 | 
32 | 	<script type="text/javascript">
33 | 	var num = 1;
34 | 	function show_message(){
35 | 		var n = Math.random()*20;
36 | 		if (n<15) return;
37 | 
38 | 		var message = {
39 | 			text:"Message #"+(num++),
40 | 			type:(n>18?"error":"")
41 | 		}
42 | 		dhtmlx.message(message);
43 | 	}
44 | 	for (var i = 0; i < 10; i++)
45 | 		show_message();
46 | 	window.setInterval(show_message, 500);
47 | 	</script>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/samples/02_alert.html:
--------------------------------------------------------------------------------
 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 | 	</style>
12 | </head>
13 | <body>
14 | 	<script type="text/javascript">
15 | 		dhtmlx.alert("Test alert", function(result){
16 | 			dhtmlx.alert({
17 | 				title:"Custom title",
18 | 				ok:"Custom text",
19 | 				text:"Result: "+result,
20 | 				callback:function(){
21 | 					dhtmlx.alert({
22 | 						type:"alert-warning",
23 | 						text:"Warning",
24 | 						callback:function(){
25 | 							dhtmlx.alert({
26 | 								type:"alert-error",
27 | 								text:"Error"
28 | 							});
29 | 						}
30 | 					});
31 | 				}
32 | 			});
33 | 		});
34 | 	</script>	
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/samples/03_confirm.html:
--------------------------------------------------------------------------------
 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 | 	</style>
12 | </head>
13 | <body>
14 | 	<script type="text/javascript">
15 | 		dhtmlx.confirm("Test confirm", function(result){
16 | 			dhtmlx.confirm({
17 | 				title:"Custom title",
18 | 				ok:"Yes", cancel:"No",
19 | 				text:"Result: "+result,
20 | 				callback:function(){
21 | 					dhtmlx.confirm({
22 | 						type:"confirm-warning",
23 | 						text:"Warning",
24 | 						callback:function(){
25 | 							dhtmlx.confirm({
26 | 								type:"confirm-error",
27 | 								text:"Error"
28 | 							});
29 | 						}
30 | 					});
31 | 				}
32 | 			});
33 | 		});
34 | 	</script>	
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/samples/04_skins.html:
--------------------------------------------------------------------------------
  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" title="Default">
  7 | 	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_growl_dark.css" title="Growl - dark">
  8 | 	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_growl_shiny.css" title="Growl - shiny">
  9 | 	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_solid.css" title="Solid">
 10 | 	<link rel="stylesheet" type="text/css" href="../codebase/themes/message_skyblue.css" title="SkyBlue">
 11 | 	<style type="text/css">
 12 | 		fieldset {
 13 | 			width:250px;
 14 | 			margin-top:10px;
 15 | 		}
 16 | 		fieldset input{
 17 | 			width:250px;
 18 | 			padding:7px 10px;
 19 | 		}
 20 | 		legend{
 21 | 			color:navy;
 22 | 			font-size:10pt;
 23 | 			font-family:Tahoma;
 24 | 		}
 25 | 	</style>
 26 | 	<script type="text/javascript">
 27 | 	function setActiveStyleSheet(title){
 28 | 		var links = document.getElementsByTagName("link");
 29 | 		for (var i = 0; i < links.length; i++){
 30 | 			links[i].disabled = (links[i].getAttribute("title") != title);
 31 | 		}
 32 | 	}
 33 | 	setActiveStyleSheet("Default")
 34 | 	</script>
 35 | </head>
 36 | <body>
 37 | 	
 38 | 	
 39 | 	<fieldset>
 40 | 		<legend>Skin</legend>
 41 | 		<select onchange="setActiveStyleSheet(this.value);">
 42 | 			<option>Default</option>
 43 | 			<option>Growl - dark</option>
 44 | 			<option>Growl - shiny</option>
 45 | 			<option>Solid</option>
 46 | 			<option>SkyBlue</option>
 47 | 		</select>
 48 | 	</fieldset>
 49 | 
 50 | 	<fieldset>
 51 | 		<legend>Message</legend>
 52 | 		<div><input type='button' value='Show message' onclick='dhtmlx.message("You have pressed the button!")'> </div>
 53 | 		<div><input type='button' value='Show styled message' onclick='dhtmlx.message({ type:"error", text:"You have pressed the <br> CRITICAL button!" })'> </div>
 54 | 		<div><input type='button' value='Show rich content' onclick='rich_message();'> </div>
 55 | 	</fieldset>
 56 | 
 57 | 	<fieldset>
 58 | 		<legend>Alert</legend>
 59 | 		<div><input type='button' value='Show alert' onclick='dhtmlx.alert("Simple!")'></div>
 60 | 		<div><input type='button' value='Show alert with title' onclick='dhtmlx.alert({title:"The result", text:"Done!"})'></div>
 61 | 		<div><input type='button' value='Show styled alert' onclick='dhtmlx.alert({type:"alert-error", title:"The result", text:"Done!"})'></div>
 62 | 		<div><input type='button' value='Show rich content' onclick='rich_alert();'></div>
 63 | 	</fieldset>
 64 | 
 65 | 	<fieldset>
 66 | 		<legend>Confirm</legend>
 67 | 		<div><input type='button' value='Show confirm' onclick='dhtmlx.confirm("Simple?")'></div>
 68 | 		<div><input type='button' value='Show confirm with title' onclick='dhtmlx.confirm({ title: "The question", text:"Was it simple?"})'> </div>
 69 | 		<div><input type='button' value='Show styled confirm' onclick='dhtmlx.confirm({type:"confirm-error", title:"The question", text:"Was it simple?"})'></div>
 70 | 		<div><input type='button' value='Show rich content' onclick='rich_confirm();'></div>
 71 | 	</fieldset>
 72 | 
 73 | 	
 74 | 	
 75 | 
 76 | 	<script type="text/javascript">
 77 | 	var num = 1;
 78 | 	function show_message(){
 79 | 		var n = Math.random()*20;
 80 | 		if (n<15) return;
 81 | 
 82 | 		var message = {
 83 | 			text:"Message #"+(num++),
 84 | 			type:(n>18?"error":"")
 85 | 		}
 86 | 		dhtmlx.message(message);
 87 | 	}
 88 | 	for (var i = 0; i < 10; i++)
 89 | 		show_message();
 90 | 	window.setInterval(show_message, 500);
 91 | 
 92 | 	function rich_confirm(){
 93 | 		dhtmlx.confirm("<img src='alert_medium.png'><strong>Need more <a target='blank' href='http://en.wikipedia.org/wiki/Coffee'>coffee!</a></strong><br/><br/> You can use any type of html content here - links, images, etc.");
 94 | 	}
 95 | 	function rich_alert(){
 96 | 		dhtmlx.alert("<img src='alert_medium.png'><strong>Need more <a target='blank' href='http://en.wikipedia.org/wiki/Coffee'>coffee!</a></strong><br/><br/> You can use any type of html content here - links, images, etc.");
 97 | 	}
 98 | 	function rich_message(){
 99 | 		dhtmlx.message({
100 | 			text:"<img src='alert_small.png'> Need more <a target='blank' href='http://en.wikipedia.org/wiki/Coffee'>coffee!</a><br/><br/> You can use any type of html content here - links, images, etc.",
101 | 			expire:-1
102 | 		});
103 | 	}
104 | 	</script>
105 | </body>
106 | </html>


--------------------------------------------------------------------------------
/samples/05_modalbox.html:
--------------------------------------------------------------------------------
 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 | 	<input type='button' value='Custom sizes, closing through link' onclick="boxA()"><br>
30 | 	<input type='button' value='Top position, buttons' onclick="boxB()"><br>
31 | 	<input type='button' value='Form in the box, custom button' onclick="boxC()"><br>
32 | 
33 | 	<input type='button' value='Custom styles' onclick="boxD()"><br>
34 | 
35 | 	<script type="text/javascript">
36 | 	function boxA(){
37 | 		dhtmlx.modalbox({ 
38 | 			title:"Configuration", 
39 | 			text:"Height, widht and position can be redeined<br><br> You can use code like <div><code>onclick='dhtmlx.modalbox.hide(this)'</code></div> to close a modal box <br/><br/> <a href='#' onclick='dhtmlx.modalbox.hide(this)'>click to close</a>",
40 | 			width:"450px",
41 | 			height:"300px"
42 | 		});
43 | 	}
44 | 	function boxB(){
45 | 		dhtmlx.modalbox({ 
46 | 			text:"Some text here",
47 | 			width:"450px",
48 | 			position:"top",
49 | 			buttons:["Ignore", "Confirm", "Deny"],
50 | 			callback:function(index){
51 | 				dhtmlx.message("Button "+index+" was pressed")
52 | 			}
53 | 		});
54 | 	}
55 | 	function boxC(){
56 | 		var box = dhtmlx.modalbox({ 
57 | 			title:"Configuration", 
58 | 			text:"<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>",
59 | 			width:"300px"
60 | 		});
61 | 		//timeout is necessary only in IE
62 | 		setTimeout(function(){
63 | 			box.getElementsByTagName("input")[0].focus();	
64 | 		},1);
65 | 		
66 | 
67 | 	}
68 | 	function save_callback(box){
69 | 		dhtmlx.message("Saving...");
70 | 		dhtmlx.modalbox.hide(box);
71 | 	}
72 | 
73 | 	function boxD(){
74 | 		dhtmlx.modalbox({ 
75 | 			type:"alert-error",
76 | 			title:"Critical error", 
77 | 			text:"<img src='alert_medium.png'><strong>Need more <a target='blank' href='http://en.wikipedia.org/wiki/Coffee'>coffee!</a></strong><br/><br/> You can use any type of html content here - links, images, etc.",
78 | 			buttons:["Ok"]
79 | 		});
80 | 	}
81 | 	boxC();
82 | 	</script>	
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/samples/05_modalbox_reuse.html:
--------------------------------------------------------------------------------
 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' style='display:none'>
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>


--------------------------------------------------------------------------------
/samples/alert_medium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DHTMLX/message/32ac755c601b472b5d94e42d0904f0bf8ae03a57/samples/alert_medium.png


--------------------------------------------------------------------------------
/samples/alert_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DHTMLX/message/32ac755c601b472b5d94e42d0904f0bf8ae03a57/samples/alert_small.png


--------------------------------------------------------------------------------