jQuery 单击时关闭对话框（任何地方）

Close dialog on click (anywhere)

提问by Fuxi

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?

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

回答by Jason

Edit: Here's a plugin I authored that extends the jQuery UI Dialog to include closing when clicking outside plus other features: https://github.com/jasonday/jQuery-UI-Dialog-extended

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

Here are 3 methods to close a jquery UI dialog when clicking outside popin:

以下是在 popin 外部单击时关闭 jquery UI 对话框的 3 种方法：

If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/

如果对话框是模态的/有背景覆盖：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');
            })
        }
    });
}); 

If dialog is non-modal Method 1: http://jsfiddle.net/jasonday/xpkFf/

如果对话框是非模态方法1：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');
        }
    });

Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/

非模态对话框方法2：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;
    }
});

回答by jgallant

When creating a JQuery Dialog window, JQuery inserts a ui-widget-overlay class. If you bind a click function to that class to close the dialog, it should provide the functionality you are looking for.

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

Code will be something like this (untested):

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

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

Edit:The following has been tested for Kendoas well:

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

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

回答by Hymanadams49

If you have several dialogs that could be opened on a page, this will allow any of them to be closed by clicking on the background:

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

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

(Only works for modal dialogs, as it relies on '.ui-widget-overlay'. And it does close allopen dialogs any time the background of one of them is clicked.)

（仅适用于模态对话框，因为它依赖于“.ui-widget-overlay”。并且只要单击其中一个的背景，它就会关闭所有打开的对话框。）

回答by DaWolf

If you'd like to do it for all dialogs throughout the site try the following code...

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

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

});

回答by jk.

This post may help:

这篇文章可能有帮助：

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

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

See also How to close a jQuery UI modal dialog by clicking outside the area covered by the box?for explanation of when and how to apply overlayclick or live event depending on how you are using dialog on page.

另请参阅如何通过单击框覆盖的区域外来关闭 jQuery UI 模式对话框？解释何时以及如何应用overlay点击或实时事件，具体取决于您在页面上使用对话框的方式。

回答by neokio

In some cases, Jason's answer is overkill. And $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); });doesn't always work with dynamic content.

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

The solution that I find works in all cases is:

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

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

回答by perkas

If the code of the previous posts doesn't work, give this a try:

如果之前帖子的代码不起作用，请尝试以下操作：

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

回答by dragoeco

A bit late but this is a solution that worked for me. Perfect if your modal is inside the overlay tag. So, the modal will close when you click anywhere outside the modal content.

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

HTML

HTML

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

JS

JS

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

Here is a working example

这是一个工作示例

回答by Laurent

Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.

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

More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

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

Laurent

洛朗

回答by Stepan Tripal

Try this:

尝试这个：

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