我們先把上面拆解出來的功能完成！
1。透明層（顯示與隱藏）
關鍵是要同時設置下面這幾個樣式，才能使主流浏覽器上都現實透明的效果。
filter= 'Alpha(Opacity=50)';
MozOpacity ='0.5';
opacity='0.5';
可能很多人都知道，類似這種在透明層上現實東西的效果，多源至於一個稱為lightbox的效果。這裡我也這樣命名：
function Lightbox(id)
{
this.box = this.createBox();
this.id = id||'lightbox_id';
}
Lightbox.prototype=
{
createBox:function(){
var box = document.getElementById(this.id)||document.createElement('div');
box.id = box.id||this.id;
with(box.style){
position='absolute';
left='0';
top='0';
width='100%';
height='100%';
zIndex='1000';
background='#ccc';
filter= 'Alpha(Opacity=50)';
MozOpacity ='0.5';
opacity='0.5';
display='none';
}
document.body.appendChild(box);
return box;
},
show:function(){
this.box.style.height= document.documentElement.scrollHeight+'px';
this.box.style.display = '';
},
hide:function(){
this.box.style.display = 'none';
}
}
2。表單提交（ajax或iframe）
迅雷上的是用的iframe，我們這裡先說iframe
iframe就簡單多了，form的target屬性設置為某個iframe的name就可以了。設置iframe的onload屬性，那麼當表單提交完成以後他就會執行相應處理。
<!--表單上的設置-->
<form id="login_form" action="login.php" target="login_submit_iframe" method="post">
<!--iframe上的設置-->
<iframe name="login_submit_iframe" id="login_submit_iframe" style="display:none;" width="0" height="0" ></iframe>
如果用ajax的話，代碼也很簡單。可能大家用的js框架不一樣。但絕大多數都大同小異，我相信大家一看就知道是什麼意思。
類我就不在這列舉了，我只寫一下怎麼用它。
這其實就是ajax in action這本書上的那個net類。
/*很多人可能會說,為什麼沒用encodeURIComponent避免亂碼?這裡不需要使用encodeURIComponent了，在類裡面調用過了*/
/**
* 'login.php':登陸驗證頁[廢話]
* Login.checkLogin:ajax回調函數[廢話]
* loadXMLDoc的參數，表單裡要傳遞的數據[廢話]
*/
new Ajax('login.php',Login.checkLogin).loadXMLDoc({
username:document.getElementById('username').value,
password:document.getElementById('password').value,
vcode:document.getElementById('vcode').value
});
3。select的顯示與隱藏，以及cookie操作。
既然select不能被div擋住，那就把他干掉吧！
var Select={
show:function(){
var selects=document.getElementsByTagName('select');
for(var m=0;m<selects.length;m++) selects[m].style.visibility="visible";
},
hide:function(){
var selects=document.getElementsByTagName('select');
for(var m=0;m<selects.length;m++) selects[m].style.visibility="hidden";
}
}
還要准備一套cookie函數
網絡最大的好處：對於某些問題，你只需知道該干什麼就可以了，至於具體該怎麼做已經有人幫你做好了。
下面我就隨便在論壇裡搜了一下，就找到了一個
http://www.phpchina.com/bbs/view ... a=page=1&sid=4jSn3r
var Cookie=
{
check:function(){
//判斷cookie是否開啟
var cookieEnabled=(navigator.cookieEnabled)? true : false;
//如果浏覽器不是ie4+或ns6+
if (typeof navigator.cookieEnabled=="undefined" && !cookieEnabled){
document.cookie="testcookie";
cookieEnabled=(document.cookie=="testcookie")? true : falsedocument.cookie="";
}
//如果沒有開啟
if(cookieEnabled){
return true;
}else{
return false;
}
},
add:function(name,value,expireHours){
var cookieString=name+"="+escape(value);
//判斷是否設置過期時間
if(expireHours>0){
var date=new Date();
date.setTime(date.getTime+expireHours*3600*1000);
cookieString=cookieString+"; expire="+date.toGMTString();
}
document.cookie=cookieString;
},
get:function(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var m=0;m<arrCookie.length;m++){
var arr=arrCookie[m].split("=");
if(arr[0]==name){
return unescape(arr[1]);
}
}
return false;
},
del:function(name){
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie=name+"=; expire="+date.toGMTString();
}
}
4。前面提到的回調函數以及後台的兩個頁面
最後再說一下前面提到的回調函數Login.checkLogin。登陸後你需要做什麼，寫在Login.loginSuccess裡就行了，最後為了方便使用稍有改變。
/*這裡沒有檢驗是否支持cookie，在login彈出的時候檢測了.不支持cookie的話，登陸窗口都彈不出來。*/
var Login=
{
statu: 0,
/*這就是裡登陸成功的話，需要做的處理。通常是把整個頁面登陸前後不同的地方處理一下。你可以重載一下*/
loginSuccess:function(){
document.getElementById('login_result').innerHTML=Cookie.get('username')+'已經登陸';
alert('登陸成功了！');
},
/*這就是裡登陸失敗的話，需要做的處理。通常是把整個頁面登陸前後不同的地方處理一下。你可以重載一下*/
loginOutSuccess:function(){
document.getElementById('login_result').innerHTML=Cookie.get('username')+'剛成功退出';
alert('退出成功！');
},
checkLogin:function(){
if(Login.statu==1&&Cookie.get('loginStatu')==1){
new LoginDialog('login_box').hide();
Login.loginSuccess();
}else if(Login.statu==2&&Cookie.get('loginStatu')==0){
Login.statu=0;
Login.loginOutSuccess();
}else if(Login.statu==1){
alert('請檢查你的用戶名，密碼以及驗證碼！');
}
},
getVcode:function(){
document.getElementById('verify_code').src='vcode.php?cachetime='+new Date().getTime();
},
loginOut:function(){
Login.statu=2;
document.getElementById('login_submit_iframe').contentWindow.location='loginout.php';
}
}
後台的代碼我就不細說了，各自系統有各自的區別。我這裡把測試用的代碼貼出來，並說一下這些文件該做什麼，你只要保證的你頁面有這些作用就行了。
<?php
/**
* header裡設置的字符編碼格式要和你前台的一致，否則當出現雙字節字符的時候就會出現亂碼.
* 其他的都可以用setCookie的方式，寫在cookie裡傳到前台。
* 其中標志登陸成功的 'loginStatu'必須設為1，其他的就看你的登陸是怎麼處理的了
*/
header('content-type:text/html; charset=utf-8');
session_start();
$username = 'phpchina';
$password = 'phpchina';
if($username==$_POST['username']&&$password==$_POST['password']&&$_SESSION['vcode']==$_POST['vcode']){
setcookie('username','phpchina');
setcookie('loginStatu','1');
}?>
/*驗證碼程序就不用說了吧！我這裡是測試用的，所以就隨便截了個時間做驗證碼*/
<?php
session_start();
$_SESSION['vcode'] = substr(time(),-4);
$im = imagecreatetruecolor(40, 20);
$bg = imagecolorallocate($im, 225, 225, 225);
$textcolor = imagecolorallocate($im, 0, 0, 0);
imagefill($im,1,1,$bg);
imagestring($im, 5, 0, 0, $_SESSION['vcode'], $textcolor);
header("Content-type:image/jpeg");
imagejpeg($im);
?>
最後看看LoginDialog類理解全過程：
function LoginDialog(formid)
{
this.dialog = document.getElementById(formid||'login_box');
this.overDiv = this.overDiv ||new Lightbox();
}
LoginDialog.prototype =
{
show:function(){
if(!Cookie.check()){alert('你的浏覽器不支持cookie,無法正常登陸');return}
else if(Cookie.get('loginStatu')==1){alert('你已經登陸！');return}
Login.statu=1;
this.overDiv.show();
Select.hide();
Login.getVcode();
this.dialog.style.display='';
},
hide:function(){
Login.statu=0;
this.overDiv.hide();
Select.show()
this.dialog.style.display='none';
}
}
主要是看show()
hide()只是還原操作
//當不支持cookie的時候提示錯誤，並退出
if(!Cookie.check()){alert('你的浏覽器不支持cookie,無法正常登陸');return}
//當支持cookie而cookie.loginstatu的值為1時，說明已經登陸。就不用重復登陸了。
else if(Cookie.get('loginStatu')==1){alert('你已經登陸！');return}
//設置Login.statu=1;表示當前正在做登陸操作
Login.statu=1;
//透明背景層顯示
this.overDiv.show();
//隱藏select
Select.hide();
//刷新驗證碼
Login.getVcode();
//顯示登陸窗口
this.dialog.style.display='';
在完成以上這些步驟以後，就是分為iframe還是ajax兩種方式提交表單了。
而提交完表單後：
如果是iframe形式提交,iframe的onload事件會調用Login.checkLogin(),當check成功時，他會對應調用Login.loginSuccess()和Login.loginOutSuccess()
而ajax則是把Login.checkLogin做為回調函數來激活。
因此，登陸成功後具體做什麼由 Login.loginSuccess()和Login.loginOutSuccess()決定。使用的時候，重載一下它們就可以了。
