原生js实现弹出层效果
知识要点
1.遮罩层的宽度和高度是js获取页面的宽高（页面内容）
//获取遮罩层(内容)的高度和宽度 varsHeight=document.documentElement.scrollHeight; varsWidth=document.documentElement.scrollWidth;
2.登录框设置静止定位fixed
3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2
//获取login的宽度和高度并设置偏移值 vardHeight=oLogin.offsetHeight; vardWidth=oLogin.offsetWidth; oLogin.style.left=(sWidth-dWidth)/2+"px"; oLogin.style.top=(wHeight-dHeight)/2+"px";
完整代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear:both;float:none;height:0;overflow:hidden;}
p{font-size:100px;}
#mask{
background:#000;
opacity:0.75;
filter:alpha(opacity=75);
height:1000px;
width:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
}
#login{
position:fixed;
left:30%;
top:30%;
z-index:1001;
}
.loginCon{
width:670px;
height:380px;
background:#fff;
border:5pxsolid#F01400;
}
#close{
width:30px;
height:30px;
background:blue;
cursor:pointer;
position:absolute;
right:10px;
top:10px;
}
#btnLogin{
width:80px;
height:40px;
background:#F01400;
margin:0auto;
display:block;
cursor:pointer;
border-style:none;
color:#fff;
font-size:16px;
}
</style>
</head>
<body>
<buttonid="btnLogin">登录</button>
<!--
<divid="mask"></div>
<divid="login">
<divclass="loginCon">
<divid="close"></div>
</div>
</div>
-->
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<scripttype="text/javascript">
functionopenNew(){
//获取页面body！内容！的高度和宽度
varsHeight=document.documentElement.scrollHeight;
varsWidth=document.documentElement.scrollWidth;
//获取可视区域高度，宽度与页面内容的宽度一样
varwHeight=document.documentElement.clientHeight;
//创建遮罩层div并插入body
varoMask=document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight+"px";
//宽度直接用100%在样式里
document.body.appendChild(oMask);
//创建登录层div并插入body
varoLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<divclass='loginCon'><divid='close'></div></div>"
document.body.appendChild(oLogin);
//获取login的宽度和高度并设置偏移值
vardHeight=oLogin.offsetHeight;
vardWidth=oLogin.offsetWidth;
oLogin.style.left=(sWidth-dWidth)/2+"px";
oLogin.style.top=(wHeight-dHeight)/2+"px";
//获取关闭按钮
varoClose=document.getElementById("close");
oMask.onclick=oClose.onclick=function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
}
}
window.onload=function(){
varoBtn=document.getElementById("btnLogin");
oBtn.onclick=function(){
openNew();
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！