jQuery UI dialogs: how to close dialog when click outside?

Question

In docs I didn\'t see such information.

There are options to close dialog in such cases:

1) push Esc;

2) click on \"OK\" or \"Close\" buttons in the

Answer 1

This is my solution.

I have, for example

Some content in here
Different content in here
And so on...

Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.

// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
    if( $("div.ui-dialog").is(":visible") )
    {
        var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
        if ($("#"+openDialogId).dialog("isOpen"))
        {
            $("#"+openDialogId).dialog('close');
        }
    }        
});