Диалог jQuery, закрывающийся при щелчке снаружи

Question

Я знаю, что могу использовать следующее, чтобы закрыть диалоговое окно, нажав снаружи:

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

Но как мне изменить это, чтобы оно работало для каждого диалогового окна, то есть я хочу сказать, закрыть любое диалоговое окнополе, как у нас есть несколько на странице, и было бы проще иметь одну строку кода?

Answer 1

вы можете присвоить каждому диалогу класс

, а затем выбрать его, запустить на каждом и подбирать, даже если он не открыт, он будет работать:

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

Answer 2

Может быть, это излишне, но попробуйте

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

Вам нужно только один раз запустить этот код на своей странице, метод live должен заставить его работать каждый раз, когда вы открываете диалог.

РЕДАКТИРОВАТЬ: Если это не работает, это может быть ошибка .dialog. Попробуйте

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

Answer 3

Из моих тестов это работает хорошо.

$('[data-role=dialog]').dialog( "close" );

Закрывает любой диалог.

Answer 4

Ответы даны практически на работе. За исключением того, что вы не можете вызвать dialog('close') для элементов с классом ui-dialog. Это сгенерированный jquery-ui контент вокруг вашего исходного элемента, и close должен вызываться для исходного элемента, который вы использовали, когда вызывали .dialog. К счастью, jquery добавляет класс ui-dialog-content к ним. Используйте это, чтобы изменить решение Гая, и вы получите:

$(document).on('click', '.ui-widget-overlay', function() {
    $('.ui-dialog-content').each(function() {
       $(this).dialog('close'); 
    });
});​

Вы можете попробовать это на jsfiddle .

EDIT: изменено .click на .live, поскольку ui-widget-overlay может еще не существовать при выполнении этого кода.

РЕДАКТИРОВАТЬ: изменено на .on вместо .live, поскольку оно устарело.