Question

我有一个带有一些模态对话框的应用程序。当我点击叠加时，这些对话框会自动关闭。我想阻止这种行为，只有当我点击一个正常工作的特定按钮时才让它们关闭。我该如何管理？

叠加层将在以下div中自动创建：

<div class="ui-widget-overlay" 
 style="height: 100%; width: 100%; position: fixed; 
 left: 0px; top: 0px; z-index: 2001; opacity: 0.3;">
</div>

由于

Answer 1

这个怎么样：

$('.ui-widget-overlay').click(function(e) {
    e.preventDefault();
    return false;
});

如果失败，也许可以尝试：

window.onload = function() {
    $('.ui-widget-overlay').off('click');
}

Answer 2

以下是解决方案：

＆＃13;

$("#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;

Answer 3

$("#yourmodal").dialog({
  closeOnEscape: false,
  resizable: false,
  modal: true,
  open: function() {
    $('.ui-widget-overlay').css('pointer-events', 'none')
  },
  close: function() {}
});

Answer 4

您不应将 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() {}
});

单击叠加时jquery阻止关闭对话框

4 个答案: