原生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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
javascript 内存模型实例详解
Apr 18 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
js Math 对象的方法
2013/09/01 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python实现图像识别功能
2018/01/29 Python
如何利用python查找电脑文件
2018/04/27 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
python三引号如何输入
2020/07/06 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
工程师求职简历的自我评价分享
2013/10/10 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
毕业生求职信范文
2014/06/29 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
离婚起诉书范本
2015/05/18 职场文书
世界名著读书笔记
2015/06/25 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
nginx中proxy_pass各种用法详解
2021/11/07 Servers
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技