Close jQuery UI Dialog on mouse click outside of box

Question

So I have some jQuery UI Dialogs and for user usability I think it would be best if users would be able to close the dialog box when clicking outside the box instead of having to click the small close button on the dialog box.

jQuery Code:

$(document).ready(function() { 
 var dlg=$('#createTeam').dialog({
     title: 'Create a Team',
     resizable: true,
     autoOpen:false,
     modal: true,
     hide: 'fade',
     width:600,
     height:285,
     clickOutside: true, // clicking outside the dialog will close it
     clickOutsideTrigger: "#addEngineer",
     close: function(event, ui) {
              location.reload();
         }
  });


  $('#createTeamLink').click(function(e) {
      dlg.load('admin/addTeam.php');
      e.preventDefault();
      dlg.dialog('open');
  }); 
}); 

Can anyone advise on what I need to add to the code above to be able to close the dialog box on mouse click outside of the box?

Answer 1

I'm not sure why the clickOutside : true property isn't working though I can provide a simple workaround. On the page with the modal, you can catch body click events like so:

$(document).click(function() {
    dlg.dialog('close');
});

However, this will be ANY click event on the page, so we have to exclude clicking on the modal from firing this event handler. It seems you have already done this with e.preventDefault() however, so add the above code and it should work. A better solution would be to include a modal backdrop in your modal HTML, and catch click events on that. If you provide your HTML I'll give you an example of this.