NetEase, who has about login effect

Let's get the function out of here first!
1. Transparent layer (show and hide)
The key is to set the following styles in order to make the mainstream browser reality transparent effect.

Filter= ' Alpha (opacity=50) ';
mozopacity = ' 0.5 ';
opacity= ' 0.5 ';

Many people may know that, like this in the transparent layer of the effect of real things, multi-source as a result of a called Lightbox. Here I also named:

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. Form submission (Ajax or IFRAME)
The Thunder is used in the IFRAME, we here first say IFrame
The IFRAME is much simpler, and the target property of the form is set to the name of an IFRAME. Set the OnLoad property of the IFrame, then when the form submission is complete, he performs the appropriate processing.

< settings on the!--form-->
<form id= "Login_form" action= "login.php" target= "Login_submit_iframe" method= "POST" >
<!--setting on an IFRAME-->
<iframe name= "Login_submit_iframe" id= "Login_submit_iframe" style= "Display:none" width= "0" height= "0" ></ Iframe>

If you use Ajax, the code is simple. Perhaps everyone uses the JS framework is different. But most of them are the same, and I'm sure we'll see what it means.
Class I'm not listed here, I'll just write about how to use it.
This is actually the net class in the Ajax in action book.

/* Many people may say, why not encodeuricomponent to avoid garbled? Here does not need to use encodeURIComponent, in the class inside call over the * *
/**
* ' login.php ': Landing verification page [nonsense]
* Login.checkLogin:ajax callback function [nonsense]
* Loadxmldoc parameters, the data to be passed in the form [nonsense]
*/

New Ajax (' login.php ', Login.checklogin). Loadxmldoc ({
Username:document.getElementById (' username '). Value,
Password:document.getElementById (' password '). Value,
Vcode:document.getElementById (' Vcode '). Value
});

3. Display and hide of select, and cookie operation.
Since the select cannot be blocked by Div, then kill him!

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

And you have to prepare a cookie function.
The biggest advantage of the network: for some problems, you only need to know what to do, as to the specific how to do already have someone to help you do it.
Below I casually in the forum searches a bit, has found a
Http://www.111cn.net/bbs/view ... a=page=1&sid=4jsn3r

var cookie=
{
Check:function () {
To determine whether a cookie is turned on
var cookieenabled= (navigator.cookieenabled)? True:false;
If the browser is not ie4+ or ns6+
if (typeof navigator.cookieenabled== "undefined" &&!cookieenabled) {
Document.cookie= "TestCookie";
Cookieenabled= (document.cookie== "TestCookie")? True:falsedocument.cookie= "";
}

If it's not turned on
if (cookieenabled) {
return true;
}else{
return false;
}
},
Add:function (name,value,expirehours) {
var cookiestring=name+ "=" +escape (value);
Determine whether to set an expiration time
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. The callback function mentioned earlier and two pages in the background
Finally, let's say the callback function Login.checklogin mentioned earlier. After landing what you need to do, write in the login.loginsuccess, and finally to facilitate the use of a slight change.

/* There is no check to see if the cookie is supported and detected at login popup. Cookies are not supported, the landing window can not bounce out. */
var login=
{
statu:0,
/* This is the successful landing, you need to do the processing. It's usually a different place for the entire page to be processed. You can overload it.
Loginsuccess:function () {
document.getElementById (' Login_result '). Innerhtml=cookie.get (' username ') + ' has landed ';
Alert (' Landed success! ');
},
* This is the failure of the landing, you need to do the processing. It's usually a different place for the entire page to be processed. You can overload it.
Loginoutsuccess:function () {
document.getElementById (' Login_result '). Innerhtml=cookie.get (' username ') + ' just exit successfully ';
Alert (' Exit successful! ');
},
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 (' Please check your username, password and verification code! ');
}
},
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 ';
}
}

Backstage code I do not elaborate, the respective systems have their own differences. I post the test code here and say what the files are supposed to do, and you just have to make sure that your page has these effects.

<?php
/**
* Header set in the character encoding format and your front desk is consistent, otherwise when Double-byte characters will appear garbled.
* Others can be setcookie, written in cookies and uploaded to the foreground.
* The sign landing success of the ' Loginstatu ' must be set to 1, the other depends on your landing is how to deal with the
*/
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 ');
}?>

/* Verification Code program is needless to say it! I am here for the test, so I arbitrarily intercepted a time to do the verification code * *
<?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);
?>

Finally, look at the whole process of logindialog class understanding:

function Logindialog (formid)
{
This.dialog = document.getElementById (formid| | ' Login_box ');
This.overdiv = This.overdiv | | New Lightbox ();
}
Logindialog.prototype =
{
Show:function () {
if (! Cookie.check ()) {alert (' Your browser does not support cookies, cannot log in properly ');
else if (cookie.get (' Loginstatu ') ==1) {alert (' You have landed! '); 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 ';
}
}

Mainly watch show ()
Hide () is a restore operation only

Prompts for errors when cookies are not supported and exits
if (! Cookie.check ()) {alert (' Your browser does not support cookies, cannot log in properly ');

When cookies are supported and the value of Cookie.loginstatu is 1 o'clock, the description is logged in. There is no need to repeat the landing.
else if (cookie.get (' Loginstatu ') ==1) {alert (' You have landed! '); return}

Set Login.statu=1 to indicate that a login is currently being made
Login.statu=1;

Transparent Background layer Display
This.overDiv.show ();

Hide Select
Select.hide ();

Refresh Verification Code
Login.getvcode ();

//Show Login window
this.dialog.style.display= ';
After completing these steps, it is divided into IFrame or Ajax two ways to submit the form.
and after the form is submitted:
If it is a form of IFRAME submission, the OnLoad event of the IFRAME will call Login.checklogin (), when the check succeeds, he will correspond to the call login.loginsuccess () and Login.loginoutsuccess ()
and Ajax is to activate the Login.checklogin as a callback function.
Therefore, what to do when landing succeeds is determined by login.loginsuccess () and login.loginoutsuccess (). When you use them, overload them.