单击窗口外的叠加时如何关闭KendoUI模式窗口?

时间:2014-01-14 08:20:42

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

我打开了Kendo UI模态窗口,我想通过单击叠加来关闭它。我怎么能这样做?

3 个答案:

答案 0 :(得分:14)

尝试这样的事情:

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

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

demo

答案 1 :(得分:8)

如果你想将这个应用到所有的剑道窗口而不必拥有包含该实例的变量,你可以这样做:

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

答案 2 :(得分:1)

以前的答案对我不起作用。显然,较新版本的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");