首页
所有分类
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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
Angular中$compile源码分析
Jan 28 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
学习vue.js计算属性
Dec 03 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
Navigator(1) Apache(17) 数据重复(1) element-china-area-data(1) sortInts(1) Flutter(2) Hudi(1) WebSockets(3) feDisplacementMap(1) tabBar(1)
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串，超时无法还原)
2010/04/28 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
详解Vue.js——60分钟组件快速入门（上篇）
2016/12/05 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python金融数据可视化汇总
2017/11/17 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Win10下配置tensorflow-gpu的详细教程（无VS2015/2017）
2020/07/14 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
C/C++程序员常见面试题一
2012/12/08 面试题
SQL面试题
2013/12/09 面试题
实习生自荐信范文
2013/11/13 职场文书
农民工创业典型事迹
2014/01/25 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
如何使用SQL Server语句创建表
2022/04/12 SQL Server