Search results

Prevent closing of modal dialog

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

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 dialogInstance: DialogComponent;
public userName: HTMLInputElement;
public password: HTMLInputElement;

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

public validation = (args: any): void =>{
    if (this.userName.value === "" && this.password.value === "") {
        args.cancel= true;
        alert("Enter the username and password")
    } else if (this.userName.value === "") {
        args.cancel= true;
        alert("Enter the username")
    } else if (this.userName.value === "") {
        args.cancel= true;
        alert("Enter the password")
    } else if (this.userName.value.length < 4) {
        args.cancel= true;
        alert("Username must be minimum 4 characters")
    } else {
        args.cancel= false;
        this.userName.value = "";
        this.password.value = "";
    }
}

public render() {
  return (
  <div className="App" id='container'>

      <DialogComponent id="dlg-button" width='300px' isModal={true} target='#container' header='Sign In' showCloseIcon={false} closeOnEscape = {false}
       beforeClose={this.validation} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
      <div>
            <div className="login-form">
                <div className='wrap'>
                    <div id="heading"/>
                    <div className="e-float-input">
                        <input id="textvalue" type="text" ref = {user => this.userName = user!} required = {true}/>
                        <span className="e-float-line"/>
                        <label className="e-float-text">Username</label>
                    </div>
                    <div className="e-float-input">
                        <input id="textvalue2" type="password" ref = {pwd => this.password = pwd!} required = {true}/>
                        <span className="e-float-line"/>
                        <label className="e-float-text">Password</label>
                    </div>
                </div>
            </div>
        </div>
       </DialogComponent>
  </div>);
}
}

ReactDOM.render(<Default />, document.getElementById('container'));
<!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" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/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='input-container'></div>
        <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%;
}

.wrap {
    box-sizing: border-box;
    margin: 0 auto;
    width: 260px;
}
.e-dlg-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 17px 0;
}
.e-dlg-container .wrap .e-control e-btn { /* csslint allow: adjoining-classes */
    margin: 3% 26%;
}

.text-center {
    text-align: center;
}

#content {
    margin-top: 12px;
}

.e-dlg-container .e-footer-content {
    padding: 20px 0 0;
    width: 100%;
}

.e-dlg-container .e-dialog .e-footer-content .e-btn { /* csslint allow: adjoining-classes */
    width: 100%;
    height: 36px;
    margin-left: 0;
}

.e-dlg-container .e-dialog .e-footer-content {
    padding: 0 18px 18px;
}

.e-dlg-container .e-dialog .e-dlg-header-content .e-dlg-header {
    color: #333;
    font-weight: bold;
    text-align: center;
    width:  100%;
    font-size: 20px;
}