Dialog Utility in EJ2 JavaScript Dialog

4 Sep 202617 minutes to read

The Dialog component provides built-in utility functions to render alert and confirm dialogs with minimal code. The utility functions are called via DialogUtility.alert(...) and DialogUtility.confirm(...), accepting either a content string or an options object, and they return the created Dialog instance. The following options are used as an argument on calling the utility functions:

Options	Description
title	Specifies the title of the Dialog like the header property.
content	Specifies the value that can be displayed in the Dialog’s content area like the content property.
isModal	Specifies the Boolean value whether the Dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position	Specifies the value where the alert or confirm Dialog is positioned within the document, e.g., `{ X: 'center', Y: 'center' }`. For more details, refer to the position property.
okButton	Configures the `OK button` that contains button properties with the click events. `okButton:{ iconCss:'prefix icon class for the button', cssClass:'custom class for the button', click: 'action for OK button click', text: 'OK' // <-- 'OK' is the default value}`
cancelButton	Configures the `Cancel button` that contains button properties with the click events. `cancelButton:{ iconCss:'prefix icon class for the button', cssClass:'custom class for the button', click: 'action for Cancel button click', text: 'Cancel' // <-- 'Cancel' is the default value}`
isDraggable	Specifies the value whether the alert or confirm Dialog can be dragged by the user.
showCloseIcon	When set to true, the close icon is shown in the Dialog component.
closeOnEscape	When set to true, you can close the Dialog by pressing the ESC key.
animationSettings	Specifies the animation settings of the Dialog component.
cssClass	Specifies the CSS class name that can be appended to the Dialog.
zIndex	Specifies the order of the Dialog, that is displayed in front of or behind another component.
open	Event which is triggered after the Dialog is opened.
close	Event which is triggered after the Dialog is closed.

Alert dialog

An alert dialog box is used to display warning messages to the users. Use the following code to render a simple alert dialog in an application.

index.js
index.html
ej.base.enableRipple(true);

document.getElementById('targetButton').onclick = function(){
    // Initialize and render alert dialog
    ej.popups.DialogUtility.alert('This is an Alert Dialog!');
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Alert Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Render an alert dialog with options

You can customize the alert dialog by passing an options object to DialogUtility.alert(...), as shown in the following sample.

index.js
index.html
ej.base.enableRipple(true);

document.getElementById('targetButton').onclick = function(){
    // Initialize and render alert dialog with options
    ej.popups.DialogUtility.alert({
        title: 'Alert Dialog',
        content: "This is an Alert Dialog!",
        okButton: {  text: 'OK', click: okClick },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
};

function okClick(){
    alert('you clicked OK button');
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Alert Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Confirm dialog

A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ buttons.

index.js
index.html
ej.base.enableRipple(true);

document.getElementById('targetButton').onclick = function(){
    // Initialize and render confirm dialog
    ej.popups.DialogUtility.confirm('This is a Confirmation Dialog!');
};
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Confirm Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Render a confirmation dialog with options

index.js
index.html
ej.base.enableRipple(true);

document.getElementById('targetButton').onclick = function(){
// Initialize and render confirm dialog with custom options

ej.popups.DialogUtility.confirm({
        title: ' Confirmation Dialog',
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: okClick },
        cancelButton: {  text: 'Cancel', click: cancelClick },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
};

function okClick(){
    alert('you clicked OK button');
    //Hide the dialog
    this.hide();
}

function cancelClick(){
    alert('you clicked Cancel button');
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Confirm Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Close utility dialog

When rendering Alert and Confirmation dialogs through utility methods, you can close the Dialog using the following ways.

By pressing the escape key if the “closeOnEscape” property is enabled.
By clicking the close button if the “showCloseIcon” property is enabled.

You can also manually close the Dialogs by creating an instance of the Dialog and calling the hide method. Note that DialogUtility.alert(...) and DialogUtility.confirm(...) return the created Dialog instance, which you can capture and use to call hide().

The following sample demonstrates the different ways of hiding the utility dialog.

index.js
index.html
ej.base.enableRipple(true);

document.getElementById('targetButton').onclick = function(){
// Initialize and render confirm dialog with custom options

ej.popups.DialogUtility.confirm({
        title: ' Confirmation Dialog',
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: okClick },
        cancelButton: {  text: 'Cancel', click: cancelClick },
        showCloseIcon: true,
        closeOnEscape: true,
        animationSettings: { effect: 'Zoom' }
    });
};

function okClick(){
    alert('you clicked OK button');
    //Hide the dialog
    this.hide();
}

function cancelClick(){
    alert('you clicked Cancel button');
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true">Open Confirm Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Search docs

Ask Syncfusion AI Assistant