Search results

Create Nested Dialog

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.

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import * as ReactDOM from "react-dom";

export class Default extends React.Component {

public dialogInstance: DialogComponent;
public innerDialogInstance: DialogComponent;

public handleClick() {;

public nestedbuttonClick = () => {;

public onOverlayClick = () => {

public render() {
    const effect: any = { effect: 'None' };
  return (
  <div className="App">
    <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

    <DialogComponent id='outerDialog' header='Outer Dialog' showCloseIcon={true} width='400px' height='300px'
        ref={dialog => this.dialogInstance = dialog!} target='#container' closeOnEscape={false} animationSettings={effect}>
        <button className="e-control e-btn" id="innerButton" onClick={this.nestedbuttonClick} role="button" >Open InnerDialog</button>

    <DialogComponent id='innerDialog' header='Inner Dialog' showCloseIcon={true} width='250px' height='150px'
    content='' ref={dialog => this.innerDialogInstance = dialog!}
    animationSettings={effect} closeOnEscape={false} target='#outerDialog'> This is a Nested Dialog </DialogComponent>

ReactDOM.render(<Default />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

    <title>Syncfusion React Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='container'>
        <div id='loader'>Loading....</div>

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;

#container {
    height: 100%;
    overflow: hidden;
    width: 100%;

#innerButton {
  margin-left: 18px;