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

You can define the display position of a message window.
For this purpose, use the property dhtmlx.message.defPosition.

• dhtmlx.message.defPosition - ('top', 'bottom') sets the position of the window on a screen. The default value - 'top'.

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

Usage example

Note!

If you want to get message windows 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");