<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩层</title>
</head>
<style>
.bigbox{
width: 100%;
height:100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
}
.showbox{
display: none;
width:100%;
z-index: 101;
height: 100%;
background-color: #000;
/*opacity: 0.2;*/
background: rgba(0,0,0,0.3);
position: absolute;
top: 0px;
left: 0px;
}
.tanchu{
text-align: center;
z-index: 120;
display: none;
width:400px;
height:200px;
border:solid 1px pink;
background-color: #fff;
position: absolute;
top: 40%;
left: 40%;
}
.box2{
text-align: center;
width: 400px;
height: 400px;
margin: 100px auto;
border:2px solid #000;
}
#btn{
margin-top: 50px;
border:0px solid red;
width: 100px;
height: 40px;
background-color:pink;
}
.wb{
width: 200px;
height: 200px;
border:1px solid pink;
margin: 10px auto;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<body>
<div class="bigbox">
<div class="box2">
<input type="button" value="点击我看看" id="btn">
<div class="wb"></div>
</div>
<div class="showbox" id="show"></div>
<div class="tanchu" id="info">
<p>展示的内容信息</p>
<button id="close">关闭</button>
</div>
</div>
<script>
var btn=document.getElementById('btn');
var show=document.getElementById('show');
var info=document.getElementById('info');
var close=document.getElementById('close');
btn.function(){
info.classList.add('show');
show.classList.add('show');
}
close.function(){
info.classList.add('hide');
show.classList.add('hide');
}
</script>
</body>
</html>
实现动态效果
扫一扫
4416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
