Working with windows

To use dhtmlxMessage you need to have dhtmlx.js and dhtmlx.css files included on the page.

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

There are 2 ways to initialize the helper:

1. Common.
   The type (subtype) of the message window is specified through the parameter type. The default value is notice.
   
   

   dhtmlx.message({ 
       type:"confirm-warning", 
       text:"Are you sure you want to do it?"
   })

2. Window-related (applicable to alert and confirm windows only).
   The type of the window is specified in the calling method.
   
   

   dhtmlx.confirm({
       title:"Confirm",
       text:"Continue?"
   });
   //or
   dhtmlx.alert({
       title:"Alert",
       type:"alert-error",
       text:"You can't do this"
   });

Usage example

The helper can be used in 2 forms:

1. Short form
   (contains just the text of a message - implicit usage of the parameter 'text'. The other parameters take default values)
   
   

   dhtmlx.alert("some text");

2. Full form
   (contains several available parameters. Non-specified parameters take default values)
   
   

   dhtmlx.alert({
         type:"alert-error",
         text:"some text",
         title:"Error!",
         ok:"Yes"
   });

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.

There are some rules related to setting the 'type' parameter you should keep in mind:

1. To set a css class for the alert and confirm windows you must initialize such a window using the 'window-related' way.
2. To set a css class for the notice windows you must initialize such a window using the 'common' way.
3. The name of a css class should go with the 'dhtmlx-' prefix.
   
   

   <style type="text/css">
   .dhtmlx-myCss{
   	font-weight:bold !important;
   	color:white !important;
   	background-color:red !important;
   }
   </style>
   ...
   dhtmlx.message({ type:"myCss", text:"some text" });
   //or
   dhtmlx.confirm ({type:"myCss", text:"some text"});
   //or
   dhtmlx.alert ({type:"myCss", text:"some text"});

Usage example

To position a message window (alert, confirm box etc.), use the top, left properties of the object constructor:

dhtmlx.confirm({
    top:'10px', 
    left:'10px',
    type:"confirm",
    text: "Continue?",
    callback: function(result){
        dhtmlx.message("Result: "+result);
    }
});

To position an info box, use the property dhtmlx.message.defPosition.

• dhtmlx.message.defPosition - ('top', 'bottom') sets the position of the info box(s) on a screen. The default value - 'top'.<br> With the 'top' position specified, each next info box will be displayed below the previous one. With the 'bottom' position specified, each next info box will be displayed above the previous one.

dhtmlx.message.defPosition="top";
dhtmlx.message("Your data has been successfully saved!");

Usage example

Note!

If you want to get info box(s) left aligned - add the next style on the page:

<style>
.dhtmlx_message_area{
    left:5px;
    right:auto;
}
</style>

To hide a specified window manually and not to wait while it hides automatically, you can use the dhtmlx.message.hide(winId) method.

• winId - the window id specified in the window constructor

dhtmlx.confirm({
    id:"myWin",
    title:"Confirm",
    text:"Continue?"
});
..
dhtmlx.message.hide("myWin");