我有一个带有一些模态对话框的应用程序。当我点击叠加时,这些对话框会自动关闭。我想阻止这种行为,只有当我点击一个正常工作的特定按钮时才让它们关闭。我该如何管理?
叠加层将在以下div中自动创建:
<div class="ui-widget-overlay"
style="height: 100%; width: 100%; position: fixed;
left: 0px; top: 0px; z-index: 2001; opacity: 0.3;">
</div>
由于
答案 0 :(得分:0)
这个怎么样:
$('.ui-widget-overlay').click(function(e) {
e.preventDefault();
return false;
});
如果失败,也许可以尝试:
window.onload = function() {
$('.ui-widget-overlay').off('click');
}
答案 1 :(得分:0)
以下是解决方案:
$("#yourmodal").dialog({
closeOnEscape: false,
/*This will disable keyboard*/
resizable: false,
modal: true,
show: {
effect: "fade",
duration: 100
},
open: function() {
$('.ui-widget-overlay').click(function(e) {
/*This will disable click and close*/
e.preventDefault();
return false;
});
},
close: function() {},
position: {
my: "center",
at: "center",
collision: "fit"
}
});
&#13;
答案 2 :(得分:0)
$("#yourmodal").dialog({
closeOnEscape: false,
resizable: false,
modal: true,
open: function() {
$('.ui-widget-overlay').css('pointer-events', 'none')
},
close: function() {}
});
答案 3 :(得分:0)
您不应将 CSS pointer-events: none
设置为叠加层。它不会使您的叠加层取消“点击”事件。相反,它会使叠加层对所有事件“透明”,允许事件“fall though”叠加层。
如果这就是你想要的,那就继续吧。
否则使用 Event.stopImmediatePropagation
停止“点击”事件传播,如下例所示。
$("#yourmodal").dialog({
closeOnEscape: false,
open: function() {
$(".ui-widget-overlay")
.off("click").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation(); // this line is the key. "e.stopPropagation()" wouldn't be enough.
});
},
close: function() {}
});