How to close KendoUI modal window when click on overlay outside window?

Question

I have Kendo UI modal window opened and I want to close it by clicking on overlay. How can I do that?

Answer 1

Try something like this:

var dialog = $("#dialog2").kendoWindow({
    modal: true
}).data("kendoWindow").center();

$(document).on("click", ".k-overlay", function () {
    dialog.close();
});

(demo)

Answer 2

If you want to apply this to all kendo windows without having to have the variable that contains the instance handy you can do it like this:

    $(document).on('click', '.k-overlay', function () {
        var kendoWindow = $('.k-window-content.k-content', $(this).next('div.k-widget.k-window'));
        if (kendoWindow == null || kendoWindow.length == 0) {
            return;
        }
        kendoWindow.data('kendoWindow').close();
    });

Answer 3

The previous answers did not work for me. Apparently newer versions of kendo do not generate the overlay until after the window is activated. So adding a click event failed because the .k-overlay class could not be found in the DOM. The solution was to add the event once the window is finished animating. I used jQuery to add the event listener since kendo uses jQuery.

var myWindow = $('#myWindow').kendoWindow({
    width: "310px",
    actions: [],
    visible: false,
    modal: true,
    title: "This is my title",
    activate: function() {
        // Close window when clicked outside of window
        $(".k-overlay").on("click",
            function() {
                myWindow.close();
            });
    }
}).data("kendoWindow");

Answer 4

To apply for all windows in the latest version of kendo use like below,

$(document).on('click', '.k-overlay', function () {
    var kendoWindow = $(this).next('div.k-widget.k-window').find('.k-window-content');
    if (kendoWindow == null || kendoWindow.length == 0) {
        return;
    }
    kendoWindow.data('kendoWindow').close();
});