基于Javascript實(shí)現(xiàn)彈出頁面效果

更新時(shí)間：2016年01月01日 20:45:00 作者：jerrylsxu

彈出層效果是一個(gè)很實(shí)用的功能，很多網(wǎng)站都采用了這種方式實(shí)現(xiàn)登錄和注冊(cè)，下面小編通過本文給大家分享具體實(shí)現(xiàn)代碼，對(duì)js彈出頁面效果相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

彈出層效果是一個(gè)很實(shí)用的功能，很多網(wǎng)站都采用了這種方式實(shí)現(xiàn)登錄和注冊(cè)，比如百度：

彈出層的特點(diǎn)：點(diǎn)擊登錄或注冊(cè)的時(shí)候在頁面的中間部分彈出一個(gè)登錄或注冊(cè)區(qū)域并且頁面有一個(gè)遮罩層，而且登錄框在遮罩層之上，也就是登陸框的z-index值要大于遮罩層的z-index值。當(dāng)點(diǎn)擊關(guān)閉或者遮罩層時(shí)關(guān)閉登錄或者注冊(cè)框(有的網(wǎng)頁沒有實(shí)現(xiàn)點(diǎn)擊遮罩層關(guān)閉登錄或注冊(cè)區(qū)域的功能。)。

最近也做了一個(gè)類似的彈出層的效果，先展示一下最終效果：

簡單的說一下實(shí)現(xiàn)的過程。

首先是遮罩層。遮罩層是在頁面動(dòng)態(tài)加載的過程中創(chuàng)建的，因?yàn)檎谡謱有枰谧≌麄€(gè)頁面，所以遮罩層的高度是通過在JavaScript計(jì)算得到，而它的寬度是整個(gè)頁面的寬度，這個(gè)也很容易得到。還需要給它設(shè)一個(gè)z-index值，盡可能很大，因?yàn)樾枰谧≌麄€(gè)頁面。當(dāng)然透明度也是必須的。

#mask{ 
background: #000;
opacity: .6;
filter:alpha(opacity=60);
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;/*動(dòng)態(tài)獲取，這里設(shè)置高度是為了測(cè)試*/
z-index:1000;
}

通過JavaScript動(dòng)態(tài)創(chuàng)建遮罩層，然后添加到頁面中：　　

//創(chuàng)建遮罩層節(jié)點(diǎn)
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);

上面代碼中的pageWidth和pageHeight就會(huì)頁面的寬度和高度值，通過

//獲取頁面的高度和寬度
var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;

獲取。這樣遮罩層就完成了。

再來說說彈出層的效果。

彈出層在頁面的中間部分顯示（這也是關(guān)鍵的步驟），也就是彈出層距離頁面左邊和右邊的距離相等，距離頁面上邊的距離和距離下邊的距離相等。注意是在可是區(qū)域中。

用公式表示就是：

left=right=(頁面可是區(qū)域?qū)挾?- 彈出層寬度)/2;top=bottom=(頁面可是區(qū)域的高度-彈出層高度)/2

而這里可是區(qū)域的寬度等于頁面的寬度，因?yàn)轫撁娴撞棵子袧L動(dòng)條。底部有滾動(dòng)條的網(wǎng)頁也是奇葩啊。設(shè)置它的left和top值之前必須已經(jīng)將它添加到頁面當(dāng)中去了，否則無法設(shè)置。

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;}

最后就是給關(guān)閉按鈕添加事件響應(yīng)函數(shù)了。

EventUtil.addHandler(oClose, 'click', function(){
document.body.removeChild(oMask);
document.body.removeChild(oLogin);
});

EventUtil是一個(gè)為了兼容瀏覽器事件處理函數(shù)而寫的一個(gè)對(duì)象，具體的實(shí)現(xiàn)在這里：

var EventUtil = {
//添加事件處理函數(shù)
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;
}
},
//刪除事件處理函數(shù)
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;
}
}
};

到這里大部分的內(nèi)容就完成了，其實(shí)現(xiàn)實(shí)起來很簡單。只要知道了原理，剩下的就是實(shí)現(xiàn)方式了。

點(diǎn)擊登錄按鈕那個(gè)功能就不介紹了，加個(gè)事件處理函數(shù)就行了?！　?/p>

源碼(寫的不規(guī)范)：

<!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;/*用于測(cè)試*/}
.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;/*動(dòng)態(tài)獲取，這里設(shè)置高度是為了測(cè)試*/
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;
//可視區(qū)域的高度和寬度
var clientHeight = document.documentElement.clientHeight;

//創(chuàng)建遮罩層節(jié)點(diǎn)
var oMask = document.createElement('div');
oMask.id = 'mask';
oMask.style.width = pageWidth + 'px';
oMask.style.height = pageHeight + 'px';
document.body.appendChild(oMask);
//創(chuàng)建登錄節(jié)點(diǎn)
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="請(qǐng)輸入登錄郵箱"></div><div class="inp_group"><input type="password" name="password" id="passwd" placeholder="請(qǐng)輸入密碼"></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="請(qǐng)輸入登錄郵箱">
</div>
<div class="inp_group">
<input type="password" name="password" id="passwd" placeholder="請(qǐng)輸入密碼">
</div>
<input type="button" value="登錄">
</form>
</div>
</div>-->
</body>
</html>

代碼到此結(jié)束，本文寫的不好，還請(qǐng)各位大俠提出寶貴意見。同時(shí)感謝大家一直以來對(duì)腳本之間網(wǎng)站的支持，在此，腳本之家小編祝大家元旦快樂。

您可能感興趣的文章: