Render a dialog using utility functions in EJ2 JavaScript Dialog control
8 May 202313 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/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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>