首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Javascript实现弹出页面效果

Posted in Javascript onJanuary 01, 2016

弹出层效果是一个很实用的功能，很多网站都采用了这种方式实现登录和注册，比如百度：

基于Javascript实现弹出页面效果

弹出层的特点：点击登录或注册的时候在页面的中间部分弹出一个登录或注册区域并且页面有一个遮罩层，而且登录框在遮罩层之上，也就是登陆框的z-index值要大于遮罩层的z-index值。当点击关闭或者遮罩层时关闭登录或者注册框(有的网页没有实现点击遮罩层关闭登录或注册区域的功能。)。

最近也做了一个类似的弹出层的效果，先展示一下最终效果：

基于Javascript实现弹出页面效果

简单的说一下实现的过程。

首先是遮罩层。遮罩层是在页面动态加载的过程中创建的，因为遮罩层需要遮住整个页面，所以遮罩层的高度是通过在JavaScript计算得到，而它的宽度是整个页面的宽度，这个也很容易得到。还需要给它设一个z-index值，尽可能很大，因为需要遮住整个页面。当然透明度也是必须的。

#mask{ 
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*动态获取，这里设置高度是为了测试*/
z-index:1000;
}

通过JavaScript动态创建遮罩层，然后添加到页面中：

//创建遮罩层节点
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);

上面代码中的pageWidth和pageHeight就会页面的宽度和高度值，通过

//获取页面的高度和宽度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;

获取。这样遮罩层就完成了。

再来说说弹出层的效果。

弹出层在页面的中间部分显示（这也是关键的步骤），也就是弹出层距离页面左边和右边的距离相等，距离页面上边的距离和距离下边的距离相等。注意是在可是区域中。

基于Javascript实现弹出页面效果

用公式表示就是：

left=right=(页面可是区域宽度 - 弹出层宽度)/2;top=bottom=(页面可是区域的高度-弹出层高度)/2

而这里可是区域的宽度等于页面的宽度，因为页面底部米有滚动条。底部有滚动条的网页也是奇葩啊。设置它的left和top值之前必须已经将它添加到页面当中去了，否则无法设置。

oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';
oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';

三水点靠木提醒大家需要注意，这里弹出层的定位方式是固定定位的，而且它的z-index值要大于遮罩层的。

#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}

最后就是给关闭按钮添加事件响应函数了。

EventUtil.addHandler(oClose, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});

EventUtil是一个为了兼容浏览器事件处理函数而写的一个对象，具体的实现在这里：

var EventUtil = {
//添加事件处理函数
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
},
//删除事件处理函数
removeHandler: function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = null;
}
}
};

到这里大部分的内容就完成了，其实现实起来很简单。只要知道了原理，剩下的就是实现方式了。

点击登录按钮那个功能就不介绍了，加个事件处理函数就行了。

源码(写的不规范)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>遮罩层效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background: #ccc;font-family: "微软雅黑";height:2000px;/*用于测试*/}
.clearfix:after,
.clearfix:before{content: "";display: block;}
.clearfix{clear: both;visibility: hidden;}
img{border: 0;}
#header{width:100%;height:60px;line-height:60px;background: #000;}
#header a{display: block;width:60px;height:60px;color:#fff;text-decoration: none;font-size:15px;background:#c9394a;text-align: center;float: right;margin-right:138px;}
#login{position:fixed;width:400px;height:400px;background:#fff;z-index: 1001;}
.title{height:50px;background: #c9394a;line-height: 50px;}
.title span{display:inline-block;color:#fff;padding-left:20px;}
.title a{display: block;float:right;background: url(close.png) no-repeat center;width: 30px;height:30px;padding:20px 20px 0 0;}
.login_content form{padding-top:40px;width:340px;margin: 0 auto;}
.inp_group{margin-bottom:30px;}
#username{
background: url(sprite.png) no-repeat 0 0;
}
#passwd{
background: url(sprite.png) no-repeat 0 -46px;
}
input[type=password],input[type="text"]{
width:272px;height:40px;
outline: none;
padding-left:48px;
border: 1px solid #000;
font-size:15px;
}
input[type=button]{
width:318px;
height:38px;
margin:0 auto;
border:1px solid #f00000;
background-color:#f00000;
color:#fff;
font-size:15px;
outline:none;
cursor:pointer;
transition:all 1s;
}
input[type=button]:hover{
background:#ff0000;
border:1px solid #ff0000;
}
#mask{
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*动态获取，这里设置高度是为了测试*/
z-index:1000;
}
</style>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
function popLogin(){
//获取页面的高度和宽度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;
//可视区域的高度和宽度
var clientHeight = document.documentElement.clientHeight;

//创建遮罩层节点
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);
//创建登录节点
var oLogin = document.createElement('div');
oLogin.id = 'login';
oLogin.innerHTML = '<div class="title"><span>登录</span><a href="javascript:;" id="close"></a></div><div class="login_content"><form method="post" action="?"><div class="inp_group"><input type="text" name="username" id="username" placeholder="请输入登录邮箱"></div><div class="inp_group"><input type="password" name="password" id="passwd" placeholder="请输入密码"></div><input type="button" value="登录"></form></div>';
document.body.appendChild(oLogin);
var loginWidth = oLogin.offsetWidth;
var loginHeight = oLogin.offsetHeight;
console.log(clientHeight);
oLogin.style.left = (pageWidth - loginWidth) / 2 + 'px';
oLogin.style.top = ( clientHeight- loginHeight) / 2 + 'px';
var oClose = document.getElementById('close');
EventUtil.addHandler(oClose, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});
EventUtil.addHandler(oMask, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});
}
window.onload = function(){
var oLoginBtn = document.getElementById('login_btn');
EventUtil.addHandler(oLoginBtn, "click", popLogin);
};
</script>
</head>
<body>
<div id="header">
<a href="javascript:;" id="login_btn">登录</a>
</div>
<!--<div id="mask"></div>-->
<!--<div id="login">
<div class="title">
<span>登录</span>
<a href="javascript:;"></a>
</div>
<div class="login_content">
<form method="post" action="?">
<div class="inp_group">
<input type="text" name="username" id="username" placeholder="请输入登录邮箱">
</div>
<div class="inp_group">
<input type="password" name="password" id="passwd" placeholder="请输入密码">
</div>
<input type="button" value="登录">
</form>
</div>
</div>-->
</body>
</html>

代码到此结束，本文写的不好，还请各位大侠提出宝贵意见。同时感谢大家一直以来对脚本之间网站的支持，在此，三水点靠木小编祝大家元旦快乐。

基于Javascript实现弹出页面效果

- Author -

jerrylsxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
语义化 H1 标签
Jan 14 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 #Javascript
底部导航(1) 对齐打印(1) 图像处理(1) 异步回调(1) 五子棋(12) CompletableFuture(1) 人工智能(2) 计算器(5) format(1) 井字棋(1)
You might like
PHP实现网上点歌（二）
2006/10/09 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JavaScript高级程序设计阅读笔记（十六） javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python二维码生成识别实例详解
2019/07/16 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
应届生找工作求职信
2014/06/24 职场文书
社区清明节活动总结
2014/07/04 职场文书
授权委托书范文
2014/07/31 职场文书
集体生日活动方案
2014/08/18 职场文书
委托书如何写
2014/08/30 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
公司宣传语大全
2015/07/13 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers