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.
ej.base.enableRipple(true);
var firstDialog = new ej.popups.Dialog ({
// Enables the header
header: 'Position-01',
// The Dialog shows within the target element
target: document.getElementById("container"),
// Dialog content
content: 'The dialog is positioned at {X: 420, Y: 14} coordinates',
//Dialog height
height: '120px',
//Dialog width
width: '360px',
position: { X: 420, Y: 14 },
animationSettings: { effect: 'None' }
});
// Render initialized outer Dialog
firstDialog.appendTo('#firstDialog');
var secondDialog = new ej.popups.Dialog ({
// Enables the header
header: 'Position-02',
animationSettings: { effect: 'None' },
// Dialog content
content: 'The dialog is positioned at {X: 420, Y: 240} coordinates',
// The Dialog shows within the target element
target: document.getElementById("container"),
// Dialog height
height: '120px',
// Dialog Width
width: '360px',
position: { X: 420, Y: 240 }
});
// Render initialized inner Dialog
secondDialog.appendTo('#secondDialog');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Dialog positioning</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="TypeScript UI 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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="firstDialog"></div>
<div id="secondDialog"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}