javascript 单击外部关闭弹出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16854464/
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
Close pop up div by clicking outside of it
提问by Kristine
I am a total beginner in programming. I have been searching for an answer but none of the ones I have found seem to solve my problem. I used the how do I center javascript css popup div, no matter what the screen resolution?pop up div method explained in the question.
我是一个完全的编程初学者。我一直在寻找答案，但我找到的答案似乎都没有解决我的问题。我使用了如何将 javascript css popup div 居中，无论屏幕分辨率如何？问题中解释的弹出 div 方法。
Is it possible to close a div by clicking outside of it with small changes to the following code?
是否可以通过在 div 外部单击并对以下代码进行小的更改来关闭 div？
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "scroll") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}
</style>
In HTML I have the number of divs hidden with the ids dialog1, dialog2and so on. When a link is clicked, the div shows up and to close it I use an imglink:
在 HTML 中，我用 ids 隐藏了 div 的数量dialog1，dialog2依此类推。当一个链接被点击时，div 出现并关闭它我使用一个img链接：
< a class="close" href="#2" onclick="closePopUp('dialog2');">< img src="/img/close.png" height="30px"></a >
回答by SHANK
When you open the pop up, create an invisible div of height width 100%, which lies at the back of your pop-up div.
当您打开弹出窗口时，创建一个高度宽度为 100% 的不可见 div，它位于弹出窗口 div 的后面。
Attach an onclick function to the div:
将 onclick 函数附加到 div：
document.getElementById('invisibleDiv').onclick = function()
{
document.getElementById('popup').style.display = 'none';
}
Hope that helps
希望有帮助
回答by mpen
var $popup = $('#your-popup');
$('body').on('click', function(ev) {
$popup.hide(); // click anywhere to hide the popup; all click events will bubble up to the body if not prevented
});
$popup.on('click', function(ev) {
ev.stopPropagation(); // prevent event from bubbling up to the body and closing the popup
});
回答by sjkm
Without creating an invisible div just with javascript:
无需使用 javascript 创建一个不可见的 div：
add this:
添加这个：
function getOffset(el) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
// function to check intersection rectangle <-> point
function intersects(ax1, ay1, ax2, ay2, px, py) {
return !(ax2 < px || ax1 > px || ay2 < py || ay1 > py);
}
document.onclick = function(event) {
var dialog = document.getElementById('dialog');
var offset = getOffset(dialog);
var ax1 = offset.left;
var ay1 = offset.top;
var ax2 = ax1 + 300 /* dialog width */;
var ay2 = ay1 + 300 /* dialog height */;
if(!intersects(ax1, ay1, ax2, ay2, event.pageX, event.pageY)) {
closePopUp('dialog');
}
};
回答by Mirko Cianfarani
Yes... Important you remove the overlay and that is <div class="ui-widget-overlay ui-front"></div>when use the Jquery 2.0.0.js... (It may be that with the previous libraries change the name)
是的......重要的是你删除了覆盖层，那就是<div class="ui-widget-overlay ui-front"></div>使用Jquery 2.0.0.js......（可能是以前的库更改了名称）
Example...
例子...
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<script type="text/javascript">
// <---- VENTA?AS DE PARAMETERES---->
$(document).ready(function() {
$( "#wnd_Paramedit" ).dialog({
autoOpen: false,
height: 'auto',
width: 405,
modal: true,
resizable:false,
buttons: {
"Accept": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Pedit" ).click(function() {
$( "#wnd_Paramedit" ).dialog( "open" );
$("div").removeClass("ui-widget-overlay ui-front");
});
});
</script>
<body>
<h3>List of parameters</h3>
<div id="sortparam" >
</div>
<input type="button" id="btn_Pedit" value="Edit"/>
<div id="wnd_EditParam" title="Edit Parameter"></div>
</body>
<div id="wnd_Paramedit" title="Choose parameter" >
<label> inserta el nombre del Parameter que quiere modificar<label><br />
<label> ID <input type=text size=30 id="med"></label>
</div>
</html>
Now you can create the other particular button for close the window pop up and you paste this specific code for close:
现在您可以创建另一个用于关闭弹出窗口的特定按钮，并粘贴此特定代码以关闭：
$( "#wnd_Paramedit" ).dialog("close");
or
或者
$( "#wnd_Paramedit" ).dialog("destroy");
