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

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

查看您的示例，您似乎正在解除事件绑定，而不是将其重新设置。

尝试移动您的绑定调用：

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

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