jquery - jquery在单击覆盖时阻止关闭对话框

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

这是解决方案：

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

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为覆盖。它不会使您的叠加层取消“点击”事件。相反，它会使覆盖对所有事件“透明”，从而允许事件“穿过”覆盖。

如果那是你想要得到的，那就继续吧。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() {}
});