单击时关闭对话框（任何位置）答案

【问题标题】：Close dialog on click (anywhere)单击时关闭对话框（任何位置）
【发布时间】：2010-12-13 03:37:42
【问题描述】：

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

【问题讨论】：

这篇文章可能对stackoverflow.com/questions/8384067/…有帮助

标签： jquery jquery-ui dialog modal-dialog

【解决方案1】：

编辑：这是我编写的一个插件，它扩展了 jQuery UI 对话框以包含单击外部时关闭以及其他功能： https://github.com/jasonday/jQuery-UI-Dialog-extended

这里有 3 种方法可以在点击外部 popin 时关闭 jquery UI 对话框：

如果对话框是模态的/有背景覆盖： http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function() {
            jQuery('.ui-widget-overlay').bind('click', function() {
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

如果对话框是非模态的方法一： http://jsfiddle.net/jasonday/xpkFf/

// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
    .bind('click', function(e) {
        if(jQuery('#dialog').dialog('isOpen')
            && !jQuery(e.target).is('.ui-dialog, a')
            && !jQuery(e.target).closest('.ui-dialog').length
        ) {
            jQuery('#dialog').dialog('close');
        }
    });

非模态对话框方法二： http://jsfiddle.net/jasonday/eccKr/

$(function() {
    $('#dialog').dialog({
        autoOpen: false, 
        minHeight: 100,
        width: 342,
        draggable: true,
        resizable: false,
        modal: false,
        closeText: 'Close',
        open: function() {
            closedialog = 1;
            $(document).bind('click', overlayclickclose); },
        focus: function() { 
            closedialog = 0; },
        close: function() { 
            $(document).unbind('click'); }
    });

    $('#linkID').click(function() {
        $('#dialog').dialog('open');
        closedialog = 0;
    });

    var closedialog;

    function overlayclickclose() {
        if (closedialog) {
            $('#dialog').dialog('close');
        }
        //set to one because click on dialog box sets to zero
        closedialog = 1;
    }
});

【讨论】：

不错的答案！我见过的唯一一个处理对话框的非模态用法。
你知道你只需要写一次长格式的jQuery吗？通过将代码包装在(function($) { .... })(jQuery); 中，无论noConflict 是否被使用，您都可以使用$。

【解决方案2】：

在创建 JQuery Dialog 窗口时，JQuery 会插入一个 ui-widget-overlay 类。如果您将单击功能绑定到该类以关闭对话框，它应该提供您正在寻找的功能。

代码将是这样的（未经测试）：

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

编辑： 以下内容也已针对剑道进行了测试：

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

【讨论】：

值得添加，你应该在叠加点击事件声明中添加'body'，如果创建事件时叠加不存在，则不会应用。 $('body').on('click', '.ui-widget-overlay', function() { $("#dialog").dialog("close"); });

【解决方案3】：

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

$('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'。并且它确实会在单击其中一个对话框的背景时关闭所有打开的对话框。）

【讨论】：

【解决方案4】：

如果您想为整个站点的所有对话框执行此操作，请尝试以下代码...

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

});

【讨论】：

【解决方案5】：

这篇文章可能会有所帮助：

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

另请参阅How to close a jQuery UI modal dialog by clicking outside the area covered by the box?，了解何时以及如何应用overlay 点击或实时事件，具体取决于您在页面上使用对话框的方式。

【讨论】：

【解决方案6】：

在某些情况下，Jason 的回答有些矫枉过正。而$('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); 并不总是适用于动态内容。

我发现适用于所有情况的解决方案是：

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

【讨论】：

在什么情况下我的任何解决方案都不起作用？（出于好奇）因为我的大部分开发都是针对动态内容的 - 我的叠加和非叠加方法每次都有效。
我还没有发现它是一个问题，但你的上面更多的是评论而不是答案 - 此外，.on 是更新的，委托可能是一个更安全的选择。

【解决方案7】：

如果之前帖子的代码不起作用，试试这个：

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

【讨论】：

【解决方案8】：

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

我的网站上的更多信息在这里：http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

劳伦特

【讨论】：

【解决方案9】：

试试这个：

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

【讨论】：

欢迎来到 SO 并感谢您的回答。我正在审查您的答案，因为它由于简洁而被标记为质量审查。在这种情况下，您的答案似乎很有用，也许是正确的，所以我不会删除它。但是，如果您可以在它周围添加一些文本来解释它的作用、它的工作原理以及它如何解决 OP 的问题，那将非常有帮助。谢谢。

【解决方案10】：

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

HTML

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

JS

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

这是working example

【讨论】：