JQuery：单击正文的任意位置以关闭此代码的模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3823963/
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
JQuery: Click anywhere on body to close modal dialog for this code
提问by abel
The same question is asked here.but it doesn't state the source, and the solution given is not directly applicable in my case afaik. I might get modded down for this, but I am asking anyway. My Entire Code:
同样的问题在这里问。但它没有说明来源，并且给出的解决方案并不直接适用于我的情况 afaik。我可能会因此而被修改，但我还是要问。 我的整个代码：
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body><div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true, autoOpen: false, height: 100, modal: true
});
});
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body></html>
All script files are third party hosted, and I would want to keep it that way.
所有脚本文件都是第三方托管的，我希望保持这种方式。
How do I get "click anywhere (outside the box)to close the modal box" functionality?
如何获得“单击任意位置（框外）以关闭模式框”功能？
回答by Thomas
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
</head>
<body>
<div id="dialog" title="Title Box">
<p>Stuff here</p>
</div>
<script type="text/javascript">
jQuery(
function() {
jQuery("#dialog")
.dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
}
);
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body>
</html>
回答by ErikPhipps
I know this has already has an accepted answer, but maybe this will help someone. It seems to me that it would be more efficient to bind a click onto the overlay div when the modal is opened. There is no need to unbind because jQueryUI destroys the overlay div on close.
我知道这已经有一个公认的答案，但也许这会对某人有所帮助。在我看来，当打开模态时，将点击绑定到叠加层 div 上会更有效。无需解除绑定，因为 jQueryUI 在关闭时会破坏覆盖 div。
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
回答by Shikiryu
Try this and tell me if it works (I don't have time to try right now)
试试这个并告诉我它是否有效（我现在没有时间尝试）
$('body').click(function(){
if( $('#dialog').dialog("isOpen") ) {
$('#dialog').dialog("close")
}
});
