在背景点击的jQuery-UI关闭模式对话框

I'm toying with jQuery UI, and I like how this demo works: http://jqueryui.com/demos/dialog/#modal-message

我正在使用jQuery UI,我喜欢这个演示的工作方式:http://jqueryui.com/demos/dialog/#modal-message

However, when a dialog comes up, the only way to close it is to click one of the interface buttons inside the dialog - how could I extend this to close any/a given dialog when the user clicks on the background layer covering up the page?

但是,当出现一个对话框时,关闭它的唯一方法是单击对话框中的一个界面按钮 - 当用户点击覆盖页面的背景图层时,如何将其扩展为关闭任何/给定的对话框?

I saw where users can hit "escape", but frankly I don't think most users will think to do this (I didn't until I saw it as an option), however it might occur to them to click away from the message.

我看到用户可以在哪里“逃脱”,但坦率地说,我认为大多数用户都不会想到这样做(直到我看到它作为一个选项我没有),但是他们可能会发现点击远离消息。

Is there an event/option I'm missing that I can tap into?

有没有我错过的事件/选项我可以使用?

5 个解决方案

#1

That should do the trick:

这应该够了吧:

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

Click on .ui-widget-overlay will trigger the click on the close button

单击.ui-widget-overlay将触发关闭按钮的单击

Cheers

#2

I've found the previous to be finicky at times, here's a simple fix:

我发现以前有点挑剔,这是一个简单的修复:

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

#3

This one will definitely work, since it matters when the overlay is in the dom or not.

这个肯定会起作用,因为当叠加在dom中时它很重要。

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

#4

just to add in case anyone run's into this problem - if you have multiple dialogs stacked on top of each other then the following will close just the dialog that's at the top:

只是添加以防任何人遇到这个问题 - 如果你有多个对话框堆叠在一起,那么以下将关闭在顶部的对话框:

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

#5

This is the preferred method to use when dealing with newer versions of Jquery.

这是在处理较新版本的Jquery时使用的首选方法。

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

#1