Question

我想在点击对话框外的任何地方时关闭jQuery对话框

我尝试过这段代码：

$("#dialog").dialog({
  modal: false,
  autoOpen: false,
  height: "auto",
  width: "auto",
  open: function() {
    jQuery('.ui-widget-overlay').bind('click', function() {
      jQuery('#dialog').dialog('close');
    })
  }
});

但是当点击框外的任何地方时，它无法关闭Jquery diaog

http://jsfiddle.net/ovog4njt/30/

我没有OP提到的小提琴中提到的任何自定义css

Answer 1

您的代码无效的原因是因为modal设置为false，这意味着没有.ui-widget-overlay元素。要解决此问题，您只需在初始化对话框时将modal设置为true，它就会按预期工作。 (updated example)

$("#dialog").dialog({
  modal: true
  // ...
});

但是，如果由于某种原因无法更改，或者您不希望对话框成为模态，则可以选择将click事件侦听器附加到{{1} }，并确定document是否在对话框元素内：

Working Example

event.target

打开对话框时还需要立即停止传播，以防止它立即关闭：

$("#dialog").dialog({
  modal: false,
  autoOpen: false,
  height: "auto",
  width: "auto",
  open: function() {
    var self = this;
    $(document).one('click', function(e) {
      if (!$(e.target).closest('.ui-dialog').length) {
        $(self).dialog('close');
      }
    });
  }
});

在其外部单击时，Jquery UI对话框不会被关闭

1 个答案: