jQuery UI 1.7.1 Modal Close on Overlay Click

Question

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?

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

Answer 1

Easiest way to do it: 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");
});