原生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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
javascript实现2048游戏示例
May 04 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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/06/23 PHP
php自定义apk安装包实例
2014/10/20 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JS宝典学习笔记(下)
2007/01/10 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
JS document form表单元素操作完整示例
2020/01/13 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Flask之flask-script模块使用
2018/07/26 Python
python将视频转换为全字符视频
2019/04/26 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
学生上课说话检讨书
2014/10/25 职场文书
教师节寄语2015
2015/03/23 职场文书
网络研修随笔感言
2015/11/18 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
一条 SQL 语句执行过程
2022/03/17 MySQL
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技