点击其他地方弹出框隐藏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing</title>
<style type="text/css">
#pop {
border: #000;
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 500px;
display: none;
}
#btn {
color: #f00;
}
</style>
</head>
<body>
<span id="btn">点击打开</span>
<div>其他内容</div>
<div>其他内容000</div>
<div id="pop">
弹出框
<p>
<a href="https://www.baidu.com" target="_blank">点击弹出层里面的a标签，弹出层也不会隐藏</a>
</p>
</div>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById('btn');
var pop = document.getElementById('pop');
window.onload = function () {
document.onclick = function (e) {
pop.style.display = "none";
}
btn.onclick = function (e) {
pop.style.display = "block";
e = e || event;
stopFunc(e);
}
pop.onclick = function (e) {
e = e || event;
stopFunc(e);
}
}
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
</script>
网友评论