脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js 弹出层

原生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实现可控制左右方向的无缝滚动效果

    这篇文章主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮，控制图片滚动的方向，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Email地址加密javascript版

    Email地址加密javascript版

    Email地址加密javascript版...
    2006-08-08
  • js 数组随机字符串(广告不重复)

    js 数组随机字符串(广告不重复)

    今天一个网友想让他的广告随机显示，每次刷新广告的内容都不一样，经过参考源码网站分析就是通过下面代码实现，特分享下方便需要的朋友
    2013-08-08
  • php中给js数组赋值方法

    php中给js数组赋值方法

    PHP函数库提供了编/解码JSON的函数：json_encode()和json_decode()，可以比较方便的传递数组或对象给javascript
    2014-03-03
  • Bootstrap 响应式实用工具实例详解

    Bootstrap 响应式实用工具实例详解

    Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。下面通过本文给大家分享Bootstrap 响应式实用工具，一起看看吧
    2017-03-03
  • js自定义事件及事件交互原理概述(二)

    js自定义事件及事件交互原理概述(二)

    上一篇的目的只是让大家简单的理解自定事件是如何模拟出来的，大家不难发现会有很多缺陷,本篇主要已解决上一篇的问题为主，感兴趣的朋友可以参考，或许本文对你有所帮助
    2013-02-02
  • Typescript中索引签名使用详解

    Typescript中索引签名使用详解

    这篇文章主要介绍了Typescript中索引签名使用详解,需要的朋友可以参考下
    2023-08-08
  • BootStrap中Table分页插件使用详解

    BootStrap中Table分页插件使用详解

    bootstrap-table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。这篇文章介绍了bootstrap中table分页插件的使用，感兴趣的朋友一起看看吧
    2016-10-10
  • Javascript实现图片懒加载插件的方法

    Javascript实现图片懒加载插件的方法

    最近由于公司项目需要，要利用Javascript实现图片懒加载效果，尝试起来发现并不难，于是将自己的实现过程分享出来给大家学习和参考，希望对有需要的朋友们带来一定的帮助，感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    这篇文章主要介绍了js实现仿Discuz文本框弹出层效果的方法,可实现点击文本框弹出窗口选择数据的效果,涉及鼠标事件及页面自定义弹出窗口的相关操作技巧,需要的朋友可以参考下
    2015-08-08

最新评论