快捷導(dǎo)航

通過(guò)遮罩層實(shí)現(xiàn)浮層DIV登錄的js代碼

更新時(shí)間：2014年02月07日 08:55:51 作者：

遮罩層實(shí)現(xiàn)浮層DIV登錄的效果，想必很多的朋友都有遇到過(guò)吧，實(shí)現(xiàn)起來(lái)也是很簡(jiǎn)單的，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)，大家可以感受下

這個(gè)就沒(méi)什么好說(shuō)的了。。直接上代碼啊?。?

首先是HTML的代碼。其中包含了登錄點(diǎn)擊按鈕以及一個(gè)簡(jiǎn)陋的登錄框。

 
<body> 
<div id="shade"></div> 
<div> 
<a onclick="login()" style="cursor:pointer">登錄</a> 
</div> 
<br/> 
什么都沒(méi)有用。。。<br/><br/> 
什么都沒(méi)有用。。。<br/><br/> 
什么都沒(méi)有用。。。<br/><br/> 
什么都沒(méi)有用。。。<br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

<div id="login" style="display: none; z-index:1025; position:absolute;"> 
<form method="post" action="user/login.html"> 
<table width="200"> 
<caption> 
用戶(hù)登錄 
</caption> 
<tr> 
<td>用戶(hù)名：</td> 
<td><input type="text" name="userName" /></td> 
</tr> 
<tr> 
<td>密碼：</td> 
<td><input type="password" name="password" /></td> 
</tr> 
<tr> 
<td>驗(yàn)證碼：</td> 
<td><img alt="" src="base/verify.html" onClick=""></td> 
</tr> 
<tr> 
<td><input type="submit" value="登錄" /></td> 
<td><input type="button" value="取消" onClick="cancel()" /></td> 
</tr> 
</table> 
</form> 
</div> 
</body> 

接著是JS腳本代碼的實(shí)現(xiàn)

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function login(){ 
var shadeWidth = document.body.clientWidth + 30; 
var shadeHeight = document.body.clientHeight + 30; 
var shade = document.getElementById("shade"); 
shade.style.width = shadeWidth + "px"; 
shade.style.height = shadeHeight + "px"; 
shade.style.display = "block"; 

var loginDivWidth = 200; 
var loginDivHeight = 800; 

var loginDiv = document.getElementById("login"); 
loginDiv.style.width = loginDivWidth + "px"; 
loginDiv.style.height = loginDivHeight + "px"; 
loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 
- loginDivHeight / 2) + "px"; 
loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 
- loginDivWidth / 2) + "px"; 
loginDiv.style.display = "block"; 
} 

</script> 

這里只有顯示遮罩層以及登錄框的代碼。至于隱藏的代碼也很簡(jiǎn)單，就是將遮罩層(shade)的DIV塊以及登錄框(login)的DIV塊的display屬性都設(shè)置成none應(yīng)該就沒(méi)有什么問(wèn)題了。。

至此，一個(gè)簡(jiǎn)單的通過(guò)遮罩層實(shí)現(xiàn)浮層DIV登錄的功能就實(shí)現(xiàn)了。關(guān)于美工方面的工作就由大家自行解決了。

在這里，有一個(gè)功能求助大家啊。。就是如何讓彈出的登錄框的DIV塊跟隨滾動(dòng)條移動(dòng)呢？？

我的實(shí)驗(yàn)代碼如下。

復(fù)制代碼代碼如下:

 
function loginDivCenter (){ 
loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 
- loginDivHeight / 2) + "px"; 
loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 
- loginDivWidth / 2) + "px"; 
} 

function scall (){ 
loginDivCenter(); 
} 

window.onscroll=scall; 
window.onresize=scall; 
window.onload=scall; 

但是很不幸的是本人失敗了。。網(wǎng)上找了很多，但都不是符合要求的。大多是設(shè)置一個(gè)setInterval來(lái)實(shí)現(xiàn)。本人覺(jué)得這樣做并不理想啊。。。

求各路大神指教啊！

您可能感興趣的文章: