我有一个Kendo UI模态窗口打开,我想通过点击遮罩层关闭它。我该怎么做?
我有一个Kendo UI模态窗口打开,我想通过点击遮罩层关闭它。我该怎么做?
试着像这样做:
var dialog = $("#dialog2").kendoWindow({
modal: true
}).data("kendoWindow").center();
$(document).on("click", ".k-overlay", function () {
dialog.close();
});
(示例)
$(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();
});
之前的回答对我没有用。显然,更新的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");
若要在最新版本的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();
});