Initialization

To add a message on a page, you should take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxMessage</title>         
        <script type="text/javascript" src="../../codebase/message.js"></script>
        <link rel="stylesheet" href="../../codebase/message.css">
    </head>
    <body>
        <!--optional-->
        <div id="message_container"></div>
        <script>
            // creating dhtmlxMessage 
            dhx.message({
                node:"message_container",
                text:"This is an error message",
                css:"dhx_message--error",
                icon:"dxi-close"
            });
</script> </body> </html>

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxMessage into the header of the created HTML file. The files are:

  • message.js
  • message.css
<script type="text/javascript" src="../../codebase/message.js"></script>
<link rel="stylesheet" href="../../codebase/message.css">

Create container

This is an optional step. By default a message appears in the top right corner of the screen.

Add a container for Message and give it an id, for example "message_container":

message.html

<div id="message_container"></div>

Create necessary message box

Create a desired message box with the corresponding method. The listed methods take an object with configuration options of message boxes as a parameter.

  • dhx.message() - to create a message
dhx.message({
    text:"Message text", 
    icon:"dxi-clock", 
    css:"expire", 
    expire:1000
});
  • dhx.alert() - to create an alert message box
dhx.alert({
    header:"Alert Header",
    text:"Alert text",
    buttonsAlignment:"center"
});
  • dhx.confirm() - to create a confirm message box
dhx.confirm({
    header:"Confirm Header",
    text:"Confirm text",
    buttons:["decline", "accept"],
    buttonsAlignment:"center"
});
  • dhx.tooltip() - to create a tooltip. The method takes two parameters:
dhx.tooltip("Current Value 1", {node: "first", position: "center"});

Configuration properties

There is a set of properties you can specify for message boxes to optimize their configuration for your needs. Read details in the related article.

Back to top