Custom messages, alerts, confirmations
Custom notifications, alerts, confirmations
This library was extracted from code of DHTMLX suite.
Live samples can be checked at http://dhtmlx.github.com/message/
jsMessage offers 4 variations at your disposal:
The type (subtype) of the message window is specified through the parameter type. The default value is "message".
dhtmlx.message({ type:"confirm-warning", text:"Are you sure you want to do it?" })
or, you can use separate methods
dhtmlx.confirm({ title:"Confirm", text:"Continue?" }); //or dhtmlx.alert({ title:"Alert", type:"alert-error", text:"You can do this" }); //or dhtmlx.modalbox({ title:"Settings", text:"Abstract popup" });
For any type of the message window you can define a custom style to achieve the desired look. Generally, the appropriate css class is specified through the parameter type: you define a css class and set the parameter to its name.
Full form
dhtmlx.message({ title: "Close", type: "alert", text: "You can't close this window!", callback: function() {dhtmlx.alert("Test alert");} }) //or dhtmlx.alert({ text: "Download is completed.", callback: function() {dhtmlx.alert("Test alert");} })
Short form
dhtmlx.alert("someText");
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)
Full form
dhtmlx.message({ type:"confirm", text: "Continue?", callback: function() {dhtmlx.confirm("Test confirm");} }); //or dhtmlx.confirm({ title: "Close", type:"confirm-warning", text: "Are you sure you want to do it?", callback: function() {dhtmlx.confirm("Test confirm");} });
Short form
dhtmlx.confirm("ConfirmText");
Examples
dhtmlx.modalbox({ title:"Settings" text: " ... html code here... ", buttons:["Save", "Defaults", "Cancel"], callback:process_result });
function returns the html container of the box which can be used for some actions
var box = dhtmlx.modalbox(...); box.getElementsByTagName("input")[0].focus(); ... dhtmlx.modalbox.hide(box); //hide popup
There are 3 way to close modal box
var box = dhtmlx.modalbox({ text:"Click to close" });
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
var box = dhtmlx.modalbox({ text:"" });
Instead of setting html text you can place any html container on the page in the modalbox
Some form here
var box = dhtmlx.modalbox(content:"mycontent");
after box will be closed, you can reopen it by
dhtmlx.modalbox(box);
Full form
dhtmlx.message({ text:"An error has occured.
Please, see the log file!", expire:1000, You can use negative value (-1) to make notice persistent. type:"customCss" // 'customCss' - css class });
Short form
dhtmlx.message("Your data has been successfully saved!");
Default delay of notifications can be set as
dhtmlx.message.expire = 4000; //time in milliseconds t.position = "top";
Default position of notices can be set as
dhtmlx.message.position = "top"; // possible values "top" or "bottom"
Interaction with alert and confirm from keyboard can be disabled by
dhtmlx.message.keyboard = false; // possible values "top" or "bottom"
For all kinds of messages, there are alert variations, which can be used for more important notifications
dhtmlx.message({ type:"error", "Critical error!"}); //or dhtmlx.message({ type:"alert-error", "Critical error!"}); //or dhtmlx.message({ type:"confirm-error", "Confirm self-destruction!"});