jQuery Dialog, closing when click outside

Question

I know I can use the following to close the dialog box by clicking outside:

$('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); });

But how do I change this so it works for every dialog box, ie I want to say close any dialog box as we have multiple on a page and would be easier to have one line of code?

Answer 1

Maybe this is overkill, but try

$('.ui-widget-overlay').live('click',
    function() {
        $(".ui-dialog").dialog("close");
    }
);

You only need to run this code once on your page, the live method should make it work any time you open a dialog.

EDIT: If this isn't working, it might be .dialog's fault. Try

$('.ui-widget-overlay').live('click',
    function() {
        $(".ui-dialog").each(
            function() {
               $(this).dialog("close");
            }
        );
    }
);

Answer 2

you can give each dialog a class

and then select it and run on each and cose it even if its not open it will work:

$('.ui-widget-overlay').click(function() { $(".dialogs").each(function()
 {$(this).dialog("close");}) });