<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
height: 1000px;
background: cadetblue;
}
#mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 800px;
background: #000;
opacity: .75;
}
#login{
position: fixed;
left: 30%;
top: 30%;
}
.content{
width: 300px;
height: 300px;
background: white;
position: relative;
}
.close{
width: 30px;
height: 30px;
background: yellowgreen;
position: absolute;
right: 5px;
top: 5px;
text-align: center;
line-height: 30px;
color: white;
font-weight: bold;
}
#button{
width: 100px;
height: 30px;
background: brown;
position: absolute;
right: 50px;
top: 10px;
line-height: 30px;
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="main" id="main">
<div id="button">点击弹出</div>
<!--<div class="mask"></div>
<div class="login">
<div class="content">
<div class="close"></div>
</div>
</div>-->
</div>
<script>
function aaa(){
var oMain=document.getElementById('main');
var sHeight=document.documentElement.scrollHeight; //这个值赋给mask高
var sWidth=document.documentElement.scrollWidth;
var cHeight=document.documentElement.clientHeight;
var cWidth=document.documentElement.clientWidth;
var oMask=document.createElement('div');
oMask.id='mask';
oMask.style.height=sHeight+'px';
oMask.style.width=sWidth+'px';
oMain.appendChild(oMask);
var oLogin=document.createElement('div');
oLogin.id='login';
oLogin.innerHTML='<div class="content"><div class="close" id="close">X</div></div>';
oMain.appendChild(oLogin);
var offHeight=oLogin.offsetHeight;
var offWidth=oLogin.offsetWidth;
oLogin.style.top=(cHeight-offHeight)/2+'px';
oLogin.style.left=(sWidth-offWidth)/2+'px';
var oClose=document.getElementById('close');
oMask.onclick=oClose.onclick=function(){
oMain.removeChild(oMask);
oMain.removeChild(oLogin);
}
}
var oBtn=document.getElementById('button');
oBtn.onclick=aaa;
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 模拟弹出框遮罩层
前端ABC