Question

我正在尝试覆盖jQuery UI模式对话框的默认行为，以便在单击叠加层时关闭该框。我第一次打开它后，下面的代码将关闭对话框，然后单击叠加层。当我再次打开对话框时，单击叠加层不会执行任何操作。我在这里错过了一个活动。有人能指出我在这里做错了吗？

谢谢！

$(function(){

        $('#production_schedule_dialog').dialog({
            autoOpen: false,
            width: 570,
            modal: true,
            closeOnEscape: true
        }); 

        $('#production_schedule_dialog_link').click(function(){
            $('#production_schedule_dialog').dialog('open');
            return false;
        });

        $(document).bind('click', dialogBlur);
});


var dialogBlur = function(event){
    var target = $(event.target);
    if (target.is('.ui-dialog') || target.parents('.ui-dialog').length) {
        return;
    }

    $('.ui-dialog:visible').find('.ui-dialog-titlebar-close').trigger('click');

    $(document).unbind('click', dialogBlur);
}

Answer 1

最简单的方法： http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus

添加：

$('.ui-widget-overlay').live("click", function() {
    //Close the dialog
    $("#dialog").dialog("close");
});

Answer 2

如果您使用旧版本的jQuery（1.7之前版本），Paul的解决方案可以正常工作。现在，.live()已被弃用。请尝试使用on()。

$('.ui-widget-overlay').on("click", function() {
    //Close the dialog
    $(this).find(".dialog").dialog("close");
});

Answer 3

我不确定为什么你的代码不起作用，但我接受了它，修改了它，并得到了一个看起来像你和我想要的版本：

var openDialogWindow = function(dialogId)
 {

     $(dialogId).dialog('open');
     $(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick);
 }

 var closeDialogWindowOnOverlayClick = function(event){
     var closeButton = $(".ui-dialog:visible").find(".ui-dialog-titlebar-close");
     closeButton.trigger("click");
     $(".ui-widget-overlay").unbind("click", closeDialogWindowOnOverlayClick);
 }

这里的主要区别在于我将对话框关闭逻辑绑定到点击JQuery的覆盖对象（而不是文档，就像你一样）。然后我在对话框打开时进行绑定，并在对话框关闭时取消绑定。并非真正必要，但它可以保持清洁。

无论如何，感谢你的灵感。

Answer 4

最佳方式：

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

Answer 5

查看您的示例，看起来您正在取消绑定事件并且不重新设置它。

尝试移动绑定调用：

    $('#production_schedule_dialog_link').click(function(){
            $('#production_schedule_dialog').dialog('open');
            $(document).bind('click', dialogBlur);
            return false;
    });

每次打开对话框时都应重新绑定模糊侦听器。

Answer 6

如果页面包含很少的对话框，则可以使用此通用方法：

$(document).on('click', '.ui-widget-overlay', function() {
  var $dialog = $(this).siblings('.ui-dialog:visible')
    .find('.ui-dialog-content');
  if ($dialog.length && $dialog.dialog('isOpen')) {
    $dialog.dialog('close');
  }
});

Answer 7

这篇文章可能有所帮助：

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

Answer 8

这么多复杂的答案......这是一个简单的可重复使用的答案。

$('.ui-widget-overlay').live('click', function(event)
{
    $(this).prev().find('div:nth-child(2)').dialog('close');
});

jQuery UI 1.7.1叠加上的模态关闭单击

8 个答案: