我构建了一个弹出窗口的按钮，我用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>
答案 0 :(得分：0)
你可以放一个全宽＆amp;弹出窗口后面的高度叠加div，低不透明度，
因此，当用户点击该div时，您可以关闭弹出窗口。
答案 1 :(得分：0)
＃popup-container中的onclick事件正在冒泡到＃popup-box1。
尝试使用此onclick更新＃popup-wrapper。
<div id="popup-wrapper" onclick='var event = arguments[0] || window.event; event.stopPropagation();'>
以下更新的示例。
<!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" onclick='var event = arguments[0] || window.event; event.stopPropagation();'>
<div id="popup-container">
<p>click me</p>
<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>
我会将此onclick代码移动到您的脚本标记，但这可以让您走上正确的轨道。
答案 2 :(得分：0)
你的意思是这样吗？因为我运行你的代码片段，我看到的不是弹出窗口。
(function($) {
$('.btn-open-modal').on('click', function() {
var target = $(this).data('target');
$(target).addClass('in');
});
$('.modal').on('click', function(e) {
//Check whether click on modal-content
if (e.target !== this)
return;
$(this).removeClass('in');
});
})(jQuery);body {
font-size: 14px;
background: #808080;
}
.backgroung-deep-blue {
background: #34495e;
}
.wrapper {
max-width: 60em;
margin: 0 auto;
}
.content {
position: relative;
padding: 20px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
}
.main-content {
margin: 0;
font: 1em/1.5em'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 120px;
}
/*Button*/
.btn {
margin: 15px;
padding: 10px 25px;
letter-spacing: 1px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
background: none;
border: 3px solid #fff;
color: #fff;
background: #0090C0;
opacity: 1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.btn:hover {
opacity: 0.8;
}
.btn:focus {
outline: none;
}
/*------End Common CSS-------*/
.modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
/*Default hide*/
opacity: 0;
/*Default transparent*/
background-color: black;
/* Fallback color */
background: rgba(0, 0, 0, 0.4);
/* Background with opacity*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.modal.in {
opacity: 1;
/*Toggle visible*/
z-index: 1;
/*On top*/
}
.modal.in .animated-from-top,
.modal.in .animated-from-bottom {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
/*Toggle position*/
}
.modal-content {
position: relative;
max-width: 40em;
margin: 5em auto;
padding: 2em;
background: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.animated-from-top {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform: translateY(-200%);
transform: translateY(-200%);
/*Default over top*/
}
.animated-from-bottom {
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
/*Default over bottom*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="content">
<button class="btn btn-open-modal" data-target="#modal-from-top">From Top</button>
<button class="btn btn-open-modal" data-target="#modal-from-bottom">From Bottom</button>
</section>
</div>
<!--/wrapper-->
<div class="modal" id="modal-from-top">
<div class="modal-content animated-from-top">
<p class="main-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<!--/modal-from-top-->
<div class="modal" id="modal-from-bottom">
<div class="modal-content animated-from-bottom">
<p class="main-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<!--/modal-from-bottom-->
<!-- Orginal Pen: http://codepen.io/trungk18/pen/dXVmEE -->