demo代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>motaikuang</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
width: 100%;
}
.box {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
left: 0;
display: none;
}
.mask {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background: #fff;
}
span {
font-size: 30px;
position: absolute;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="mask">
<span class="close">×</span>
</div>
</div>
<a href="#">zhuce</a>
<a href="#">denglu</a>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
var mask = document.getElementsByClassName("mask")[0];
var close = document.getElementsByClassName("close")[0];
var a1 = document.getElementsByTagName("a")[0];
var a2 = document.getElementsByTagName("a")[1];
console.log(close)
a1.onclick = function(){
box.style.display = "block";
};
a2.onclick = function(){
box.style.display = "block";
};
box.onclick = function(){
// 阻止冒泡或者是捕获
event.stopPropagation();
box.style.display = "none";
};
close.onclick = function(){
event.stopPropagation();
box.style.display = "none";
};
mask.onclick = function(){
event.stopPropagation();
box.style.display = "block";
};
</script>
</body>
</html>
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
