jQuery UI 对话框：单击外部时关闭

Question

我有一个 jQuery UI 对话框。我尝试实现“$('.ui-widget-overlay').bind('click'....”方法，建议在用户单击外部时关闭对话框。但是，它不适用于我的代码。我做错了什么？

$('input[name="delete-image"]').click(function(e){
    e.preventDefault();
    $("div.deleteImageDialog").dialog({
        resizable: false,
        modal: true,
        buttons: {
            "OK": function(e) {
                e.preventDefault();
                $.ajax({
                    url: $('form.addEdit').attr('action'),
                    type: $('form.addEdit').attr('method'),
                    data: $('form.addEdit').serialize(),
                    open: function(){
                                $('.ui-widget-overlay').bind('click', function(){
                                    $('div.deleteImageDialog').dialog('close');
                                })
                    },
                    success: function(html) { }
                });
                $(this).dialog('close');
            },
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });

});

Answer 1

然后你必须将一个事件绑定到覆盖层。

$('input[name="delete-image"]').click(function(e){
    e.preventDefault();
    $("div.deleteImageDialog").dialog({
            // your code...
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
    $('.overlay_sector').bind( 'click', function() {
            $("div.deleteImageDialog").dialog('close');
            $('.overlay_sector').unbind();
    } )
});