Search results

Center the dialog based on the current scroll position

04 Aug 2021 / 1 minute to read

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.jsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
Copied to clipboard
<!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>
Copied to clipboard
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;