< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

JavaScript Message Box

dhtmlxMessage is a set of easily configurable JavaScript/HTML dialog boxes for showing confirmations, alerts,
notifications, and tooltips with flexible customization. Part of the Suite UI library.

Product Features

  • Cross-browser compatibility
  • Full control with JavaScript API
  • Flexible customization
  • Three ready-to-use types: message box, alert box, confirm box
  • Custom icons for message boxes
  • Configurable position and display duration
  • Ability to change the buttons’ alignment
  • Smart positioning of tooltips
  • Ability to switch on/off a tooltip
  • Accessibility support

How to Create a JavaScript Message Box

Here are 5 simple steps to initialize dhtmlxMessage in your app:
1
Create an HTML file
2
Include the Message js and css source files in the header
3
Optionally, add a container with an id - e.g. “message_container”
4
Call the widget with the dhx.message method (or another corresponding method)
5
Pass the necessary configuration properties into the message’s constructor

Example of a JavaScript Tooltip

Why Choose DHTMLX Message Boxes?

Build various JavaScript dialog boxes on the fly

dhtmlxMessage allows you to easily create any dialog box you need: JavaScript confirm and alert boxes, notification messages, and HTML5 tooltips. These small components help you to inform end users about what’s happening in your app. It takes just a few lines of code to initialize these helpers and supply them with the desired set of properties.

Adjust message boxes and tooltips to your requirements

Due to a rich API, there are many ways how to fine-tune JavaScript messages to meet your needs. You can redefine the position and display duration of message boxes and tooltips and modify headers and button names as well as buttons’ alignment of confirm and alert boxes. Additionally, the JavaScript tooltip API enables you to switch tooltips on and off.

Apply custom styling to match your web app

As well as all other Suite components, our JavaScript notification library offers unlimited customization possibilities. You can change whatever needs to be customized via CSS: background, borders and border-radius, buttons, etc. Just create new CSS classes with the necessary styling settings. Besides, you can apply a custom icon font pack for message boxes.

Make use of Angular, React, and Vue.js wrappers

Our js message boxes and tooltips can be smoothly integrated into web apps based on three topmost frameworks: Angular, React, and Vue.js. Our developers have prepared special wrappers, which you can find in an evaluation package of Suite. Download and test it for 30 days to try how it works in your projects.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components

demo-screenshot

File manager built with the help of Suite widgets: Layout, Grid, DataView, Toolbar, etc.

Try All UI Widgets for Free

All JavaScript UI widgets are part of the DHTMLX Suite library. You can download a free trial version and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxMessage integration into your app? Contact us