Dialog utility in EJ2 JavaScript Dialog control
8 May 202317 minutes to read
The dialog component provides built-in utility functions to render the alert and confirm dialogs with the minimal code. The following options are used as an argument on calling the utility functions:
| Options | Description |
|---|---|
| title | Specifies the title of dialog like the header property. |
| content | Specifies the value that can be displayed in 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. For more details, refer to the position property { X: ‘center’, Y: ‘center’} |
| okButton | Configures the OK button that contains button properties with the click events. okButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for OK button click', text: 'Yes' // <-- Default value is 'OK'}
|
| cancelButton | Configures the Cancel button that contains button properties with the click events. cancelButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for ‘Cancel’ button click', text: 'No' // <-- Default value is 'Cancel'}
|
| 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 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 or behind of 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 like messages to the users. Use the following code to render a simple alert dialog in an application.
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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’ button.
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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 an Alert and Confirmation dialog 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 to the dialog and call the “hide” method.
Below sample demonstrates the different ways of hiding the utility dialog.
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/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>