Skip to main content

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/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.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 JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

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

Create a container

note

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":

index.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
});

Related sample: Message. Show Message

  • dhx.alert() - to create an alert message box
dhx.alert({
header:"Alert Header",
text:"Alert text",
buttonsAlignment:"center"
});

Related sample: Message. Show Alert

  • dhx.confirm() - to create a confirm message box
dhx.confirm({
header:"Confirm Header",
text:"Confirm text",
buttons:["decline", "accept"],
buttonsAlignment:"center"
});

Related sample: Message. Show Confirm

  • dhx.tooltip() - to create a tooltip. The method takes two parameters:
dhx.tooltip("Current Value 1", {node: "first", position: "center"});

Related sample: Message. Show Tooltip

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.