By default, the dialog is displayed in the center of the target container. The dialog position can be set using the position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.
[Class-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
render() {
const firstPosition = { X: 160, Y: 14 };
const secondPosition = { X: 160, Y: 240 };
const effect = { effect: 'None' };
return (<div className="App" id='dialog-target'>
<DialogComponent id='firstDialog' header='Position-01' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={firstPosition}>
The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>
<DialogComponent id='secondDialog' header='Position-02' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={secondPosition}>
The dialog is positioned at X: 160, Y: 240 coordinates </DialogComponent>
</div>);
}
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {}> {
public render() {
const firstPosition: any = { X: 160, Y: 14 };
const secondPosition: any = { X: 160, Y: 240 };
const effect: any = { effect: 'None' };
return (
<div className="App" id='dialog-target'>
<DialogComponent id='firstDialog' header='Position-01' visible={true}
width='360px' height='120px' target='#dialog-target'
closeOnEscape={false} animationSettings={effect} position={firstPosition}
>
The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>
<DialogComponent id='secondDialog' header='Position-02' visible={true}
width='360px' height='120px' target='#dialog-target'
closeOnEscape={false} animationSettings={effect} position={secondPosition}
>
The dialog is positioned at X: 160, Y: 240 coordinates </DialogComponent>
</div>);
}
}
export default App;
[Functional-component]
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
const firstPosition = { X: 160, Y: 14 };
const secondPosition = { X: 160, Y: 240 };
const effect = { effect: 'None' };
return (<div className="App" id='dialog-target'>
<DialogComponent id='firstDialog' header='Position-01' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={firstPosition}>
The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>
<DialogComponent id='secondDialog' header='Position-02' visible={true} width='360px' height='120px' target='#dialog-target' closeOnEscape={false} animationSettings={effect} position={secondPosition}>
The dialog is positioned at X: 160, Y: 240 coordinates </DialogComponent>
</div>);
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
const firstPosition: any = { X: 160, Y: 14 };
const secondPosition: any = { X: 160, Y: 240 };
const effect: any = { effect: 'None' };
return (
<div className="App" id='dialog-target'>
<DialogComponent id='firstDialog' header='Position-01' visible={true}
width='360px' height='120px' target='#dialog-target'
closeOnEscape={false} animationSettings={effect} position={firstPosition}
>
The dialog is positioned at X: 160, Y: 14 coordinates </DialogComponent>
<DialogComponent id='secondDialog' header='Position-02' visible={true}
width='360px' height='120px' target='#dialog-target'
closeOnEscape={false} animationSettings={effect} position={secondPosition}
>
The dialog is positioned at X: 160, Y: 240 coordinates </DialogComponent>
</div>);
}
export default App;