原生js实现弹出层效果


Posted in Javascript onJanuary 20, 2017

知识要点

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery zTree异步加载简单实例分享
Feb 05 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
jQuery bind事件使用详解
2011/05/05 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
javascript控制台详解
2015/06/25 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
《望洞庭》教学反思
2014/02/16 职场文书
学校校庆演讲稿
2014/05/22 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
技能培训通讯稿
2015/07/18 职场文书
小学毕业感言100字
2015/07/30 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Python中第三方库Faker的使用详解
2022/04/02 Python