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
    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
    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
    Obviously Roger can't read. You have to feel sorry for him.

    This was great Ryan, thanks a bunch!

Leave a Reply

Leave this field empty:

Back to Top

Before you download my resume...

My Current Employment Status

I am currently happily employed and not actively seeking employment at this time. While I appreciate any and all interest in my skill-set, I am currently not available for a full-time hire. If you are interested in my skill-set and would like to hire me on a part-time basis, please contact me.

Contact Information

To avoid having my personal contact information floating freely through-out the internet, I have withheld my personal contact information from my resume. If you are interested in contacting me, please do so on my contact page.

Find Me, Follow Me, Friend Me!

Tags

Fellow Bloggers

Brought to you in part by

Epicenter Consulting - A Web Application Design and Strategy Firm