Как закрыть модальное диалоговое окно jQuery UI, щелкнув за пределами области, закрытой рамкой?

Question

Я использую jQuery 1.6 и jQuery UI. Я успешно реализовал модальное диалоговое окно , ширина которого составляет почти 50% ширины веб-страницы моего приложения. Я хотел бы дать пользователю другой способ закрыть диалоговое окно , чтобы, когда он щелкает за пределами области, покрываемой страницей «модальным полем», этот был закрыт, как если бы пользователь нажал на «стандартную» кнопку «х» в правом верхнем углу этого.

Как я могу это сделать?

Answer 1

Обновление

Это был первоначальный ответ:

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

Это рабочее решение:

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

Answer 2

Как на счет этого ， таким образом, вы можете закрыть диалоговое окно независимо от того, где оно открыто и с каким идентификатором. Это глобальная функция:

   $("body").on("click",".ui-widget-overlay",function() {
     $(".ui-dialog-titlebar-close").click();
   });

Answer 3

Чтобы уточнить, ответ Виктора работает только в том случае, если для диалогового окна установлено значение autoOpen: true, значение по умолчанию для этого диалогового окна, и , вы не открываете диалоговое окно снова с мероприятие. Если вы в любой момент откроете диалог с событием, таким как click, независимо от того, установлено ли autoOpen на true или false, вам придется использовать jQuery.live.

Fiddle демонстрирует сбой оверлея click событие с autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle демонстрирует, как live работает с autoOpen: false и с событием click: http://jsfiddle.net/GKfZM/1/

Резюме: Ответ Виктора работает только при определенных условиях.

Ссылка на учебник

Answer 4

У вас есть две опции для диалогового окна закрытия модели

$('#your-dialog-id').modal('toggle');

ИЛИ

Вы можете использовать событие нажатия непосредственно при нажатии вне поля

$("#your-dialog-id .close").click()