宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取
我们先把上面拆解出来的功能完成！
1。透明层（显示与隐藏）
关键是要同时设置下面这几个样式，才能使主流浏览器上都现实透明的效果。
filter= ‘AlphaOpacity=50)’;
MozOpacity =’0.5′;
opacity=’0.5′;
可能很多人都知道，类似这种在透明层上现实东西的效果，多源至于一个称为lightbox的效果。这里我也这样命名：
function Lightboxid)
{
this.box = this.createBox);
this.id = id||’lightbox_id’;
}
Lightbox.prototype=
{
createBox:function){
var box = document.getElementByIdthis.id)||document.createElement’div’);
box.id = box.id||this.id;
withbox.style){
position=’absolute’;
left=’0′;
top=’0′;
width=’100%’;
height=’100%’;
zIndex=’1000′;
background=’#ccc’;
filter= ‘AlphaOpacity=50)’;
MozOpacity =’0.5′;
opacity=’0.5′;
display=’none’;
}
document.body.appendChildbox);
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属性，那么当表单提交完成以后他就会执行相应处理。
如果用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’);
forvar m=0;m<selects.length;m++) selects[m].style.visibility="visible";
},
hide:function){
var selects=document.getElementsByTagName’select’);
forvar 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=””;
}
//如果没有开启
ifcookieEnabled){
return true;
}else{
return false;
}
},
add:functionname,value,expireHours){
var cookieString=name+”=”+escapevalue);
//判断是否设置过期时间
ifexpireHours>0){
var date=new Date);
date.setTimedate.getTime+expireHours*3600*1000);
cookieString=cookieString+”; expire=”+date.toGMTString);
}
document.cookie=cookieString;
},
get:functionname){
var strCookie=document.cookie;
var arrCookie=strCookie.split”; “);
forvar m=0;m var arr=arrCookie[m].split”=”);
ifarr[0]==name){
return unescapearr[1]);
}
}
return false;
},
del:functionname){
var date=new Date);
date.setTimedate.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){
ifLogin.statu==1&&Cookie.get’loginStatu’)==1){
new LoginDialog’login_box’).hide);
Login.loginSuccess);
}else ifLogin.statu==2&&Cookie.get’loginStatu’)==0){
Login.statu=0;
Login.loginOutSuccess);
}else ifLogin.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’] = substrtime),-4);
$im = imagecreatetruecolor40, 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 LoginDialogformid)
{
this.dialog = document.getElementByIdformid||’login_box’);
this.overDiv = this.overDiv ||new Lightbox);
}
LoginDialog.prototype =
{
show:function){
if!Cookie.check)){alert’你的浏览器不支持cookie,无法正常登陆’);return}
else ifCookie.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 ifCookie.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)决定。使用的时候，重载一下它们就可以了。
http://www.bkjia.com/PHPjc/445128.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/445128.htmlTechArticle我们先把上面拆解出来的功能完成！ 1。透明层（显示与隐藏） 关键是要同时设置下面这几个样式，才能使主流浏览器上都现实透明的效果…
支付宝扫一扫
微信扫一扫
