<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 400px;
height: 400px;
position: relative;
text-align: center;
background-color:rgba(200,152,241,0.3);
margin: 0 auto;
}
.win{
width: 160px;
height: 120px;
background-color:#fff;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -80px;
margin-top: -60px;
z-index: 999;
display: none;
}
.lightbox{
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
position: fixed;
z-index: 99;
display: none;
}
.touch_me{
cursor: pointer;
}
</style>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
$("touch_me").onclick=function(){
$("light_box").style.display="block";
$("win").style.display="block";
}
$("winner").onclick=function(){
$("light_box").style.display="none";
$("win").style.display="none";
}
}
</script>
</head>
<body>
<div class="lightbox" id="light_box"></div>
<div class="box" >
<div class="good-boy" id="good_boy">
<div class="win" id="win">
<p><span id="winner">关闭</span></p>
这里是弹窗内容
</div>
</div>
<span id="touch_me" class="touch_me">点击我</span>
</div>
</body>
</html>
web前端遮罩
最新推荐文章于 2023-05-31 19:22:39 发布