原生js实现弹出层效果

更新时间：2017年01月20日 11:47:22 作者：夏天不做梦

本文主要介绍了原生js实现弹出层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧

知识要点

1.遮罩层的宽度和高度是js获取页面的宽高（页面内容）

//获取遮罩层(内容)的高度和宽度
 var sHeight=document.documentElement.scrollHeight;
 var sWidth=document.documentElement.scrollWidth;

2.登录框设置静止定位fixed

3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2

//获取login的宽度和高度并设置偏移值
 var dHeight=oLogin.offsetHeight;
 var dWidth=oLogin.offsetWidth;
 oLogin.style.left=(sWidth-dWidth)/2+"px";
 oLogin.style.top=(wHeight-dHeight)/2+"px";

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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.5 tahoma,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:courier new,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:5px solid #F01400;
}
#close{
 width: 30px;
 height: 30px;
 background: blue;
 cursor: pointer;
 position: absolute;
 right: 10px;
 top: 10px;
}
#btnLogin{
 width: 80px;
 height: 40px;
 background: #F01400;
 margin:0 auto;
 display: block;
 cursor: pointer;
 border-style: none;
 color: #fff;
 font-size: 16px;
}
</style> 
</head> 
<body>
<button id="btnLogin">登录</button> 
<!--
<div id="mask"></div>
<div id="login">
 <div class="loginCon">
 <div id="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>
<script type="text/javascript">
function openNew(){
 //获取页面body！内容！的高度和宽度
 var sHeight=document.documentElement.scrollHeight;
 var sWidth=document.documentElement.scrollWidth;
 //获取可视区域高度，宽度与页面内容的宽度一样
 var wHeight=document.documentElement.clientHeight;
 //创建遮罩层div并插入body
 var oMask=document.createElement("div");
 oMask.id="mask";
 oMask.style.height=sHeight+"px";
 //宽度直接用100%在样式里
 document.body.appendChild(oMask);
 //创建登录层div并插入body
 var oLogin=document.createElement("div");
 oLogin.id="login";
 oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>"
 document.body.appendChild(oLogin);
 //获取login的宽度和高度并设置偏移值
 var dHeight=oLogin.offsetHeight;
 var dWidth=oLogin.offsetWidth;
 oLogin.style.left=(sWidth-dWidth)/2+"px";
 oLogin.style.top=(wHeight-dHeight)/2+"px";
 //获取关闭按钮
 var oClose=document.getElementById("close");
 oMask.onclick=oClose.onclick=function(){
  document.body.removeChild(oMask);
  document.body.removeChild(oLogin);
 }
}
window.onload=function(){
 var oBtn=document.getElementById("btnLogin");
 oBtn.onclick=function(){
  openNew();
 }
}
</script> 
</body> 
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

js
弹出层

js下用eval生成JSON对象
在使用eval生成JSON对象时，一定要注意添加一对圆括号
2010-09-09
微信小程序自定义弹窗实现过程(附代码)
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
js实现扫雷小程序的示例代码
本篇文章主要介绍了js实现扫雷小程序的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JavaScript网络请求工具库axios使用实例探索
这篇文章主要为大家介绍了JavaScript网络请求工具库axios使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
JS数组去重的常用4种方法
这篇文章主要介绍了JS数组去重的常用4种方法,ES6的Set类数组去重,for循环嵌套for循环,indexOf去重,利用filter需要的朋友可以参考下
2022-04-04
JavaScript实现简单网页版计算器
这篇文章主要介绍了JavaScript实现简单网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
JavaScript this 深入理解
一直以来，对于JavaScript 中的this的理解都是很模糊的，特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。
2009-07-07
JavaScript trim 去除字符串空格的三种方法(附代码详解)
个人认为最好的方法.采用的是正则表达式,这是最核心的原理.因为空格有多种形式。
2010-05-05
JavaScript setInterval()与setTimeout()计时器
这篇文章主要介绍了JavaScript setInterval()与setTimeout()计时器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
JS获取节点的兄弟,父级,子级元素的方法
本篇文章主要是对JS获取节点的兄弟,父级,子级元素的方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01