JQuery-UI закрыть модальный диалог на фоновом щелчке

Я играю с jQuery UI, и мне нравится, как работает эта демонстрация: http://jqueryui.com/demos/dialog/#modal-message

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

Я видел, где пользователи могут "убежать", но, честно говоря, я не думаю, что большинство пользователей подумают об этом (я не сделал этого, пока не увидел это как вариант), однако им может потребоваться щелкнуть из сообщения.

Есть ли событие/параметр, который у меня отсутствует, который я могу использовать?

Ответы

Ответ 1

Это должно сделать трюк:

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

Нажмите .ui-widget-overlay, чтобы вызвать щелчок по кнопке закрытия

Приветствия

G.

Ответ 2

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

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

Ответ 3

Это определенно будет работать, поскольку имеет значение, когда наложение находится в dom или нет.

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

Ответ 4

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

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

Ответ 5

Это предпочтительный метод, используемый при работе с более новыми версиями JQuery.

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