基于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 相关文章推荐
js 操作select与option(示例讲解)
Dec 20 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
如何使用angularJs
May 08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 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
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php生成验证码函数
2015/10/20 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Js获取事件对象代码
2010/08/05 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
学年自我鉴定
2014/01/16 职场文书
出生公证委托书
2014/04/03 职场文书
廉洁教育学习材料
2014/05/19 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle