Message - info

'; 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 63 | .dhtmlx-myCss{ 64 | font-weight:bold !important; 65 | color:white !important; 66 | background-color:red !important; 67 | } 68 | 69 | 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:"Click to close " 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:"" 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 |

Some form here

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.
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 --------------------------------------------------------------------------------