Javascript 如何通过单击框覆盖的区域外来关闭 jQuery UI 模式对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7368524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close a jQuery UI modal dialog by clicking outside the area covered by the box?
提问by Backo
I am using jQuery 1.6 and jQuery UI. I successfully implemented a modal dialogwindow which width is almost 50% of my application web page' width. I would like to give to the user another way to close the dialogso that when he\she clicks outside the area covered on the page by the "modal box", this one will be closed as if the user clicked on the "standard" "x" button on the top-right of that.
我正在使用 jQuery 1.6 和 jQuery UI。我成功地实现了一个模态对话框窗口，其宽度几乎是我的应用程序网页宽度的 50%。我想给用户另一种关闭对话框的方法，这样当他\她点击页面上“模式框”覆盖的区域之外时，这个将被关闭，就像用户点击“标准”一样右上角的“x”按钮。
How can I do that?
我怎样才能做到这一点？
采纳答案by jk.
To clarify, the answer by Victor only works if the dialog is set to autoOpen: true, the default value of the dialog, andyou do not open the dialog againwith an event. If you open the dialog with an event like clickat any point whether autoOpenis set to trueor false, then you have to use jQuery.live.
澄清一下，Victor 的答案仅在对话框设置为对话框autoOpen: true的默认值时才有效，并且您不会再次使用事件打开对话框。如果您click在任何时候打开带有事件的对话框，无论是否autoOpen设置为true或false，那么您必须使用jQuery.live.
Fiddle demonstrating failure of overlay clickevent with autoOpen: false: http://jsfiddle.net/GKfZM/
小提琴演示覆盖click事件的失败autoOpen: false：http: //jsfiddle.net/GKfZM/
Fiddle demonstrating how liveworks with autoOpen: falseand with clickevent: http://jsfiddle.net/GKfZM/1/
小提琴演示如何live使用autoOpen: false和使用click事件：http: //jsfiddle.net/GKfZM/1/
Summary:Victor's answer only works under certain conditions.
总结：维克多的回答只在特定条件下有效。
回答by Victor
Update
更新
This was the initial answer:
这是最初的答案：
$(".ui-widget-overlay").click (function () {
$("#your-dialog-id").dialog( "close" );
});
This is the working solution:
这是工作解决方案：
$('.ui-widget-overlay').live('click', function() {
$('#your-dialog-id').dialog( "close" );
});
回答by Ken
How about this way，this way you can close the dialog whatever it open from where and which id. It's a global function:
这样怎么样，这样你就可以关闭对话框，无论它从哪里和哪个id打开。这是一个全局函数：
$("body").on("click",".ui-widget-overlay",function() {
$(".ui-dialog-titlebar-close").click();
});
回答by Nikunj K.
You have two options for the close model dialog box
关闭模型对话框有两个选项
$('#your-dialog-id').modal('toggle');
OR
或者
you can use the click event directly when you click outside box
单击外部框时可以直接使用单击事件
$("#your-dialog-id .close").click()
