原生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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
javascript轮播图算法
Oct 21 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
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高级编程-函数-郑阿奇
2011/07/04 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
js实现一个简易计算器
2020/03/30 Javascript
vue实现计步器功能
2019/11/01 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
ORACLE第二个十问
2013/12/14 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
最美护士演讲稿
2014/08/27 职场文书
党性教育心得体会
2014/09/03 职场文书
护士求职自荐信
2015/03/25 职场文书
创业计划书之酒店
2019/08/30 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
新手入门Mysql--概念
2021/06/18 MySQL
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL