Jquery 单击时关闭对话框（任意位置）

是否有通过单击屏幕上的某个位置而不是关闭图标来关闭jQuery对话框的默认选项？

创建jQuery对话框窗口时，jQuery插入一个ui小部件覆盖类。如果将click函数绑定到该类以关闭对话框，则该函数应提供所需的功能

代码如下（未经测试）：

编辑： 以下内容也已经过剑道测试：

$('.k-overlay').click(function () {
            var popup = $("#dialogId").data("kendoWindow");
            if (popup)
                popup.close();
        });

这篇文章可能有助于：

另请参见，以了解何时以及如何应用

覆盖

单击或实时事件的说明，具体取决于您使用第页对话框的方式

编辑：这是我编写的一个插件，它扩展了jQueryUI对话框以包括 单击“外部”和其他功能时关闭：

以下是在弹出窗口外单击时关闭jquery UI对话框的3种方法：

如果对话框为模态/具有背景覆盖：

如果对话框为非模态方法1：

非模态对话框方法2：

---

在某些情况下，杰森的回答是矫枉过正。和

$（'.ui小部件覆盖'）。单击（函数（）{$（“#对话框”）。对话框（“关闭”）；}并不总是适用于动态内容

我发现在所有情况下都有效的解决方案是：

$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });

如果您有多个对话框可以在一个页面上打开，这将允许通过单击背景关闭其中任何对话框：

$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
});

（仅适用于模式对话框，因为它依赖于“.ui widget overlay”。并且它会在任何时候单击其中一个对话框的背景时关闭所有对话框。）
如果要在整个站点中对所有对话框执行此操作，请尝试以下代码

$.extend( $.ui.dialog.prototype.options, { 
    open: function() {
        var dialog = this;
        $('.ui-widget-overlay').bind('click', function() {
            $(dialog).dialog('close');
        });
    }   

});

面对同样的问题，我创建了一个小插件，可以在对话框外部单击时关闭对话框，无论是模式对话框还是非模式对话框。它支持同一页面上的一个或多个对话框

更多信息请访问我的网站：

劳伦特
试试这个：

$(".ui-widget-overlay").click(function () {
    $(".ui-icon.ui-icon-closethick").trigger("click");
}); 

如果前面文章的代码不起作用，请尝试一下：

$("a.ui-dialog-titlebar-close")[0].click();

有点晚了，但这是一个对我有效的解决方案。如果你的模态在叠加标签内，那就完美了。因此，当您单击模态内容之外的任何位置时，模态将关闭

HTML

<div class="modal">  
  <div class="overlay">
    <div class="modal-content">
      <p>HELLO WORLD!</p>
    </div>
  </div>
</div>

这是一个很好的答案！我见过的唯一一个涉及对话框的非模态用法。您知道吗，您只需要以长格式编写一次
jQuery
？通过将代码包装在
（函数（$）{…}）（jQuery）中
，您可以使用
$
，无论是否使用了
noConflict
。在什么情况下，我的任何解决方案都不起作用？（出于好奇）由于我的大部分开发都是针对动态内容的-我的覆盖和非覆盖方法每次都很有效。我没有发现这是一个问题，但你的上述内容更多的是一个评论而不是答案-此外，
。on
是最近的，委派可能是一个更安全的选择。欢迎使用SO，谢谢你的回答。我正在审阅你的答案，因为它简洁明了，已被标记为质量审阅。在这种情况下，你的答案似乎是有用的，也许是正确的，所以我不会删除它。但是，如果您可以在它周围添加一些文本来解释它的功能、工作原理以及它如何解决OP的问题，这将非常有用。谢谢。这篇文章可能会有帮助，值得添加，你应该在叠加点击事件声明中添加“body”，就像创建事件时叠加不存在一样，它不会被应用$（'body'）。在（'click'，'.ui小部件覆盖，'function（）{$（“#dialog”）.dialog（“close”）}）上；
$.extend( $.ui.dialog.prototype.options, { 
    open: function() {
        var dialog = this;
        $('.ui-widget-overlay').bind('click', function() {
            $(dialog).dialog('close');
        });
    }   

});

$(".ui-widget-overlay").click(function () {
    $(".ui-icon.ui-icon-closethick").trigger("click");
}); 

$("a.ui-dialog-titlebar-close")[0].click();

<div class="modal">  
  <div class="overlay">
    <div class="modal-content">
      <p>HELLO WORLD!</p>
    </div>
  </div>
</div>

$(document).on("click", function(event) {
  if ($(event.target).has(".modal-content").length) {
    $(".modal").hide();
  }
});