How to show Dialog in fullscreen in ASP.NET MVC Dialog

20 Aug 20262 minutes to read

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

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();
    }

}