Question

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

修改以下内容已经过 Kendo 的测试：

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

Answer 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'。并且只要单击其中一个的背景，它就会关闭所有打开对话框。）< / p>

Answer 4

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

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

});

Answer 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点击或直播活动，具体取决于您在网页上使用对话框的方式。

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

劳伦

Answer 9

试试这个：

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

Answer 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

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

10 个答案: