React
Demos
Support
Forum
Download
Search results

Close dialog while click on outside of dialog

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following sample, dialog is closed when clicking outside the dialog area using hide method.

Source
Preview
index.tsx
index.html
styles.css
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 settings: any = { effect: 'Zoom', duration: 400, delay: 0 };

public dialogInstance: DialogComponent;

public buttons: any = [{
    buttonModel: {
        content: 'Close',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
}];

public handleClick() {
    this.dialogInstance.show();
}

public componentDidMount() {
    document.onclick = (args: any) : void => {
        if(args.target.tagName === 'DIV') {
            this.dialogInstance.hide();
        }
    }
}

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

     <DialogComponent
        header='Delete Multiple Items' showCloseIcon={true} visible={true} animationSettings={this.settings}
        width='300px' buttons={this.buttons} closeOnEscape={true}
        content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog!}
        target='#container'/>
  </div>);
}
}

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

<head>
    <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
Previous
Next