How to show Dialog in fullscreen in ASP.NET MVC

27 Aug 20262 minutes to read

You can display the Dialog in fullscreen by passing true as an argument to the Dialog’s show method. This will expand the Dialog to occupy the entire screen.

CSHTML

<div id="container">
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Dialog").Visible(false).Content("This is a Dialog with fullscreen display.").Target("#container").Width("250px").Buttons(btn=>
{
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons1).Add();
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons2).Add();
}).Render()
</div>
<script>
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show(true);
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
<style>

    #container {
        height: 100%;
        width: 100%;
        position: absolute;
        padding: 20px;
        margin: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px;
    }
</style>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
        public string cssClass { get; set; }
    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }

}