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

I'm trying to override the default behavior of a jQuery UI modal dialog box to close the box when the overlay is clicked. The code I have below will close the dialog box after I open it for the first time and click on the overlay. When I open the dialog box again, clicking on the overlay does nothing. I am missing an event here. Can someone point out what I'm doing wrong here?

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

Thanks!

$(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);
}

8 个解决方案

#1

Easiest way to do it: http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus

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

Add this:

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

#2

Paul's solution works fine if you're using an old version of jQuery (pre-1.7). Now .live() is deprecated though. Try using on() instead.

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

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

#3

I'm not sure why your code isn't working, but I took it, modified it, and got a version that seems to work as both you and I want:

我不确定为什么你的代码不能正常工作,但我接受了它,修改了它,并得到了一个看起来像你和我想要的版本:

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);
 }

The major difference here is that I'm binding dialog-closing logic to clicks on JQuery's overlay object (instead of the document, as you are). And I do the binding when the dialog opens and unbinding it when the dialog closes. Not truly necessary, but it keeps things clean.

这里的主要区别在于我将对话框关闭逻辑绑定到点击JQuery的覆盖对象(而不是文档,就像你一样)。然后我在对话框打开时进行绑定,在对话框关闭时解除绑定。不是真的有必要,但它保持清洁。

Regardless, thanks for the inspiration.

无论如何,感谢您的灵感。

#4

Best way to do it :

最好的方法:

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

#5

looking at your example it looks like you are unbinding the event and not setting it back up.

看看你的例子看起来你正在取消事件的绑定而不是重新设置它。

try moving your bind call:

尝试移动绑定调用:

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

that should rebind your blur listener each time your dialog is opened.

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

#6

If page contains few dialogs, you can use this universal method:

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

$(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');
  }
});

#7

This post may help:

这篇文章可能有所帮助

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

#8

So many complicated answers... here is a simple reusable one.

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

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

#1