单击窗口外覆盖时如何关闭 Kendo UI 模态窗口？答案

【问题标题】：How to close KendoUI modal window when click on overlay outside window?单击窗口外覆盖时如何关闭 Kendo UI 模态窗口？
【发布时间】：2014-02-02 05:31:24
【问题描述】：

我打开了 Kendo UI 模式窗口，我想通过单击覆盖来关闭它。我该怎么做？

【问题讨论】：

标签： jquery kendo-ui modal-dialog kendo-window

【解决方案1】：

试试这样的：

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

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

(demo)

【讨论】：

【解决方案2】：

如果您想将其应用于所有剑道窗口，而不必将包含实例的变量放在手边，您可以这样做：

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

【讨论】：

【解决方案3】：

以前的答案对我不起作用。显然，较新版本的剑道直到激活窗口后才会生成覆盖。所以添加点击事件失败，因为在 DOM 中找不到 .k-overlay 类。解决方案是在窗口完成动画后添加事件。我使用 jQuery 添加事件监听器，因为 kendo 使用 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");

【讨论】：

【解决方案4】：

要在最新版本的剑道使用中申请所有窗口，如下所示，

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

【讨论】：