首页
所有分类
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 操作XML入门
Dec 25 Javascript
js给onclick事件赋值，动态传参数实例解说
Mar 28 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
Spring JPA(1) TextInputLayout(1) EditText(1) 远程桌面(2) openEuler(1) cmd(1) Spring Bean(1) Switch(1) Django(9) Tsmoothie(1)
You might like
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
详解Python中的正则表达式的用法
2015/04/09 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python面向对象进阶学习
2019/05/21 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Stefania Mode美国：奢华设计师和时尚服装
2018/01/07 全球购物
玛蒂尔达简服装：Matilda Jane Clothing
2019/02/13 全球购物
Clarks西班牙官方在线商店：clarks鞋
2019/05/03 全球购物
意大利在线药房：Saninforma
2021/02/11 全球购物
公司离职证明范本
2014/01/13 职场文书
学雷锋的心得体会
2014/09/04 职场文书
企业2014年度工作总结
2014/12/10 职场文书
导游词欢迎词
2015/02/02 职场文书
借条格式范本
2015/05/25 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
javascript Number 与 Math对象的介绍
2021/11/17 Javascript