基于Javascript实现弹出页面效果

2024-12-04 03:40:08

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

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

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

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

首先是遮罩层。遮罩层是在页面动态加载的过程中创建的，因为遮罩层需要遮住整个页面，所以遮罩层的高度是通过在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;

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

再来说说弹出层的效果。

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

用公式表示就是：

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>

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

JS实现定时页面弹出类似QQ新闻的提示框

还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出).当时上网找的这么一个资料,已经不记得原文出处了复制代码代码如下: <html> <head> <title>JavaScript提示框</title> <script type="text/javascript"> <!-- /** * 类名:CLASS_MSN_MESSAGE * 功能:提供类似MSN消息框
js 弹出新页面避免被浏览器、ad拦截的一种新方法

以绑定click弹窗的方式,改为普通的链接,即 a[target=_blank],在点击打开新窗口之前,修改其href. 绑定mousedown,鼠标点击执行完成前修改href. 绑定focus,保证tab切换+enter时替换href. 复制代码代码如下: <input type="search" id="keyword" value="" autocomplete="off" placeholder="请
Js Jquery创建一个弹出层可加载一个页面

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
js与css实现弹出层覆盖整个页面的方法

本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下: 复制代码代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-
js 点击页面其他地方关闭弹出层(示例代码)

复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen
js实现在页面上弹出蒙板技巧简单实用

蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明.maskLayer 在popWindow上面,用于显示蒙板的信息,比如"载入中--" 复制代码代码如下: <html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; fi
js实现弹出窗口、页面变成灰色并不可操作的例子分享

如果你还不会,可以看看下面这个简单的例子. 复制代码代码如下: <html><head><title>弹出一个窗口后,后面的层不可操作</title><script>function show() //显示隐藏层和弹出层{ var hideobj=document.getElementById("hidebg"); hidebg.style.display="block"; //显示隐藏层
禁止iframe页面的所有js脚本如alert及弹出窗口等

今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗
Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法

这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮解决了: 1.可以遮挡ie6下的select元素但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
基于Javascript实现弹出页面效果

弹出层效果是一个很实用的功能,很多网站都采用了这种方式实现登录和注册,比如百度: 弹出层的特点:点击登录或注册的时候在页面的中间部分弹出一个登录或注册区域并且页面有一个遮罩层,而且登录框在遮罩层之上,也就是登陆框的z-index值要大于遮罩层的z-index值.当点击关闭或者遮罩层时关闭登录或者注册框(有的网页没有实现点击遮罩层关闭登录或注册区域的功能.). 最近也做了一个类似的弹出层的效果,先展示一下最终效果: 简单的说一下实现的过程. 首先是遮罩层.遮罩层是在页面动态加载的过程中创建的,因为
基于JavaScript实现熔岩灯效果导航菜单

熔岩灯效果就是鼠标移入的时候,背景跟着滑过去~ 两方法如下: 方法一:两个文件,一个HTML,一个JS. HTML源码, <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
基于JavaScript实现选项卡效果

一个简单的选项卡的关键在于:当切换页面时,如何让所选的选项和与其对应的内容同时出现,并且在选择其他的内容时,不影响新的内容的显示. 其中用到两个很关键的思想: 1.为对象增加index属性,并通过this对index 的调用来使每个选项能显示出所对应的内容,并且属性值要设置为循环时的数值-i. 2.通过对class(类)的灵活使用,来改变当先所选中目标的样式. 3.用for循环嵌套事件对每一项进行遍历. 4.在编译时,位于body中的div和input要有预先定义的行内样式或者信息. 5.but
基于javascript实现窗口抖动效果

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r
基于JavaScript实现单选框下拉菜单添加文件效果

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"
基于JavaScript实现购物网站商品放大镜效果

大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{mar
基于JavaScript实现图片剪切效果

学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo
基于javascript实现随机颜色变化效果

本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{
基于JavaScript实现全屏透明遮罩div层锁屏效果

废话不多说了,直接给大家写js代码了,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
基于javascript实现右下角浮动广告效果

本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q

基于Javascript实现弹出页面效果

相关推荐

随机推荐