首页
所有分类
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 相关文章推荐
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
Jquery 1.9.1源码分析系列（十二）之筛选操作
Dec 02 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
深入理解js中的加载事件
Feb 08 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 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
ECharts(3) props(1) ip连接(1) 表变量(1) timestamp(1) GTID(1) mixin(1) 游标(1) 排序失效(1) 临时表(1)
You might like
谈谈PHP语法(2)
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php中filter_input函数用法分析
2014/11/15 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
非集成环境的php运行环境（Apache配置、Mysql）搭建安装图文教程
2016/04/12 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
python使用多进程的实例详解
2018/09/19 Python
python中的tcp示例详解
2018/12/09 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python科学计算之narray对象用法
2019/11/25 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
Tarte Cosmetics官网：美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
英国鹦鹉店：Parrot Essentials
2018/12/03 全球购物
会计应届生的自荐信
2013/12/13 职场文书
运动会开幕式解说词
2014/02/05 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
养牛场项目建议书
2014/05/13 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
接待员岗位职责范本
2015/04/15 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server