Search results

Center the dialog based on the current scroll position

The dialog is always centered based on the target container. If the target is not specified, then the dialog will be rendered based on its body and centered in the position of the current viewpoint.

In the following sample, the model dialog is centered based on its current scroll position of the page.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, 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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
      #loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

body{
  height: 1200px;
}

      </style>
</head>

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

</html>
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.onOverlayClick = () => {
            this.setState({ hideDialog: false });
        };
        this.dialogClose = () => {
            this.setState({ hideDialog: false });
        };
        this.state = {
            hideDialog: true
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    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 width="250px" isModal={true} visible={this.state.hideDialog} close={this.dialogClose} overlayClick={this.onOverlayClick}>
          This is a modal Dialog{" "}
        </DialogComponent>
      </div>);
    }
}
export default App;