Search results

Center the dialog based on the current scroll position

22 Oct 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.

razor
controller.cs
Copied to clipboard
<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()
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function onOverlayClick() {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.hide();
    }
</script>
<style>
    body{
        height: 1200px;
    }
</style>
Copied to clipboard
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}