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

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.

Answer 2

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.

Regardless, thanks for the inspiration.

Answer 3

This post may help:

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

Answer 4

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