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

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

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

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


dialog jquery jquery-ui jquery-ui-dialog
person Igor K    schedule 28.07.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

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

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

$('.ui-widget-overlay').click(function() { $(".dialogs").each(function()
 {$(this).dialog("close");}) });
person guy schaller    schedule 28.07.2010
comment
Код пользовательского интерфейса уже предоставляет каждому диалоговому окну класс ui-dialog, как описано в docs.jquery.com/UI/Dialog< /а>. - person MvanGeest; 28.07.2010

arrow_upward
1
arrow_downward

Может это и перебор, но попробуй

$('.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");
            }
        );
    }
);
person MvanGeest    schedule 28.07.2010
comment
Спасибо, я попробовал это, но, похоже, это не работает. через Chrome Dev Tools я вижу, что в диалоговом окне есть класс ui-dialog, поэтому я не уверен, почему это не работает. Он работает, когда я указываю идентификатор. - person Igor K; 28.07.2010
comment
Хорошо, не могли бы вы попробовать второй пример? - person MvanGeest; 28.07.2010

arrow_upward
0
arrow_downward

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

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

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

РЕДАКТИРОВАТЬ: изменено .click на .live, так как ui-widget-overlay может еще не существовать, когда этот код выполняется.

РЕДАКТИРОВАТЬ: изменено на .on вместо .live, так как оно обесценивается.

person AdmSteck    schedule 04.08.2012

arrow_upward
0
arrow_downward

Судя по моим тестам, это работает хорошо.

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

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

person JAD    schedule 06.02.2017