Closing a jQuery UI Dialog When the Dialog Loses Focus

I've used a half dozen modal window plug-ins for jQuery and most have pretty extensive features and options. Somehow I tend to always come back to jQuery UI's dialog. They've done a pretty fair job at creating a versatile and customizable modal window feature. Any container can be turned into a modal window with a simple .dialog() method chained on. The problem that I ran into recently is that when you launch the dialog window, the only way to close is by doing one of the following:

• Clicking the close button in the top right.
• Pressing the "escape" button (if the dialog was configured to close on escape).

Unfortunately if you click outside of the dialog, the dialog is not configured to close like many other modal window plug-ins do. It seems intuitive that if you click outside of the dialog window, the window should close, but after digging into jQuery UI's documentation, I was not able to find a solution. The good thing about JavaScript (and jQuery specifically), is that if functionality does not currently exist, you can always add it later.

So I began to analyze how I could do this easiest. Opening firebug I began to inspect the elements on the page, and remembered that the overlay that is laid over the rest of the browser window has a class called ui-widget-overlay. Then it hit me like a brick wall: Create an event handler to bind to all current and future overlay elements, and on click, close the dialog. Let's jump into the code:

Conclusions

If you noticed, I used the .live() method instead of the .bind() method to create the event handler. This is because the .ui-widget-overlay element does not exist initially (especially if we don't automatically open the dialog on document load). We can lazily live bind to the element to capture clicks on all existing and future elements. Now we can launch our dialog windows any way we want, and when we click outside of the dialog, it will close programmatically.

5 responses to “Closing a jQuery UI Dialog When the Dialog Loses Focus”

• 
  Roger
  Oct 6, 2010 at 8:35 AM
  Dude,
  
  this is the true way to make it :D
  
  $( ".selector" ).dialog({ closeOnEscape: true});
  
  ".selector" is the div for use how dialog.
  
  In my code I just put together ...
  
  
  // Dialog
  $('#dialog').dialog({
  autoOpen: false,
  resizable: false,
  closeOnEscape: true,
  show: "explode",
         hide: "explode",
  width: 300,
  modal:true,
  buttons: {
  "Ok": function() {
  $(this).dialog("close");
  }
  }
  });

• 
  Ryan Jeffords
  Oct 6, 2010 at 9:15 AM
  closeOnEscape works great if you hit the excape button, but what I was trying to accomplish was clicking outside of the modal window...and closing the modal.

• 
  Martin
  Oct 7, 2010 at 5:30 AM
  Obviously Roger can't read. You have to feel sorry for him.
  
  This was great Ryan, thanks a bunch!

• 
  Stephen Barrett
  Oct 19, 2010 at 8:03 AM
  This is *exactly* what I needed. Thanks so much, Ryan!

• 
  Jared Flack
  Dec 18, 2010 at 3:07 PM
  Awesome! Thanks!

Leave a Reply

• Twitter - @ryanjeffords
• LinkedIn - rjeffords
• Facebook - rjeffords
• RSS