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.

<div id='container' style="height:400px;">
    @Html.EJS().Button("targetButton").Content("Open Modal Dialog").Render()
    @Html.EJS().Dialog("dialog").IsModal(true).OverlayClick("onOverlayClick").Content("This is a modal dialog").Width("300px").Render()

    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
    function onOverlayClick() {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        height: 1200px;
public class HomeController : Controller
    public ActionResult Index()
        return View();