如何在点击窗口外覆盖层时关闭KendoUI模态窗口？

Question

我有一个Kendo UI模态窗口打开，我想通过点击遮罩层关闭它。我该怎么做？

- user1762608

Answer 1

试着像这样做：

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

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

(示例)

- Lars Höppner

Answer 2

如果您想将此应用于所有kendo窗口，而不必手动获取包含实例的变量，则可以按照以下方式操作：

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

- Sgraffite

Answer 3

之前的回答对我没有用。显然，更新的kendo版本只有在窗口被激活后才生成覆盖层。因此，添加点击事件失败，因为在DOM中找不到.k-overlay类。解决方法是在窗口完成动画后添加事件。由于kendo使用jQuery，所以我使用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");

- gsxrboy73

Answer 4

若要在最新版本的Kendo中应用于所有的窗口，请使用以下方法：

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

- Mani