A Dialog can be nested within another Dialog. The below sample contains parent and child Dialog (inner Dialog).
Step 1:
Create two div elements with id #dialog and #innerDialog.
Step 2:
Initialize the Dialog as mentioned in the below sample.
Step 3:
Set the inner Dialog target as #dialog.
ej.base.enableRipple(true);
// Initialize the Outer Dialog component
var dialog = new ej.popups.Dialog({
// Enables the header
header: 'Outer Dialog',
// Enables the close icon button in header
showCloseIcon: true,
// The Dialog shows within the target element
target: document.getElementById("container"),
// Dialog content
content: document.getElementById("dlgContent"),
//Dialog height
height: '300px',
animationSettings: { effect: 'None' },
// Disable the Esc key option to hide the Dialog
closeOnEscape: false,
//Dialog width
width: '400px',
// Dialog beforeOpen event
beforeOpen: onBeforeopen
});
// Render initialized outer Dialog
dialog.appendTo('#dialog');
// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function () {
// Call the show method to open the Dialog
dialog.show();
};
// initialize the Inner Dialog component
var innerDialog = new ej.popups.Dialog({
// Enables the header
header: 'Inner Dialog',
// Enables the close icon button in header
showCloseIcon: true,
animationSettings: { effect: 'None' },
// Disable the Esc key option to hide the Dialog
closeOnEscape: false,
// Dialog content
content: 'This is a Nested Dialog',
// InnerDialog target as outerDialog
target: document.getElementById("dialog"),
// Dialog height
height: '150px',
// Dialog Width
width: '250px'
});
document.getElementById('innerButton').onclick = function () {
// Call the show method to open the Dialog
innerDialog.show();
};
// Render initialized inner Dialog
innerDialog.appendTo('#innerDialog');
function onBeforeopen() {
document.getElementById('dlgContent').style.visibility = 'visible';
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Nested Dialog</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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button class="e-control e-btn" id="targetButton" role="button">Open Dialog</button>
<div id="dialog">
</div>
<div id="innerDialog"></div>
<div id="dlgContent" style="visibility: hidden">
<button class="e-control e-btn" id="innerButton" role="button">Open InnerDialog</button>
</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>html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}