Working with Message Boxes

Included Files

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

dhtmlxMessage is a part of 'dhtmlxSuite' package and can't be used standalone

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

Constructor

There are 2 ways to initialize the helper:

Common
The type of the message box 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?"
});

Message-related (applicable to alert and confirm boxes only).
The type of the message 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"
});

Related sample: Message

Usage Forms

The helper can be used in 2 forms:

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");
```

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

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

Styling

For any type of the message box 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.

While creating a css class, please, use the 'important' keyword to ensure correct processing.

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

To set a css class for the alert and confirm boxes, you must initialize such a box using the 'window-related' way.
To set a css class for the message boxes, you must initialize such a box using the 'common' way.
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"});

Positioning

Message Boxes

To position alert or confirm box, use the top, left properties of the object constructor:

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

Info Boxes

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

dhtmlx.message.position - ('top', 'bottom') sets the position of the info box(es) on a screen. The default value - 'top'.
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.position="top";
dhtmlx.message("Your data has been successfully saved!");

Related sample: Message

If you want to get info box(es) left aligned, add the following style on the page:

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

Hiding a Message Box with API

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

The method can't be used with dhtmlx.alert and dhtmlx.confirm

boxId - the box id specified in the box's constructor

dhtmlx.message({
    id:"myBox",
    text:"Page is loaded"
});
..
dhtmlx.message.hide("myBox");