Close Dialog by clicking outside of its region

4 Apr 20223 minutes to read

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the closeOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following sample, dialog is closed when clicking outside the dialog area using hide method.

CSHTML

<div id="target" style="height:400px;">
    <ejs-button id="normalbtn" content="Open"></ejs-button>
    <ejs-dialog id="dialog" width="400px" target="#target" Content="Are you sure you want to permanently delete all of these items?"
                showCloseIcon="true" CloseOnEscape="true" header="Delete Multiple Items">
        <e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

<script>
    document.getElementById('normalbtn').onclick = function () {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.show();
    };
    document.getElementById('target').onclick = function (args) {
        if (args.target.tagName != "BUTTON") {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.hide();
        }
    };
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }

    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { content = "YES", isPrimary = true };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "NO" };
        return View();
    }
}