我构建了一个弹出窗口的按钮，我用 javascript 函数完成了它，我希望它在我单击除弹出窗口之外的任何地方时关闭。 我试过这样做但是当我点击弹出窗口本身时它关闭了弹出窗口 请帮忙!
body{
overflow-y:scroll;
padding: 0;
margin: 0;
}
.wrapper{
width: 960px; margin: 40px auto; text-align: left;
}
.popup-position{
display: none;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
}
#popup-wrapper{
width: 500px;
margin: 70px auto;
text-align: left;
}
#popup-container{
background-color: #FFF;
padding: 20px;
border-radius: 4px;
}<!DOCTYPE html>
<html>
<head>
<title>adfadf</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link href="cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function closePopup(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id="popup-box1" class="popup-position" onclick="closePopup('popup-box1');">
<div id="popup-wrapper">
<div id="popup-container">
<p><a href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">close</a>
</p>
</div>
</div>
</div>
<div class="wrapper">
<a class="btn btn-primary" href="javascript:void(0)" onclick="toggle_visibility('popup-box1');">Open popup box 1</a>
</div>
</body>
</html>最佳答案
您可以在弹出窗口后面放置一个全宽和高的覆盖 div，具有低不透明度，
因此您可以在用户点击该 div 时关闭弹出窗口。
关于javascript - 在弹出窗口以外的任何地方单击时关闭弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38323610/