Imitation on-campus login registration Box Based on jquery + thickbox

Below I will use thickbox and css to implement the internal login (Registration) box to share with you the following:



The method is simple. You can use the iframe mode of thickbox to nest another page, and then write ajax on this page to implement the corresponding functions.
Code:
Registration: regUser.html
Copy codeThe Code is as follows:
<Link type = "text/css" href = "css/reg.css" rel = "Stylesheet"/>
<Script type = "text/javascript" src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript">
$ (). Ready (function (){
Var validate = true;
// Check whether the user name is available
$ ('# Userid'). blur (function (){
$. Ajax ({
Type: "POST ",
Url: "Ajax/UserAjax. aspx? Action = check ",
Data: "userid =" + escape ($ ('# userid'). val ()),
Success: function (msg ){
If (msg = "success "){
// Pass Verification
Validate = true;
Certificate ('your username'}.css ("display", "none ");
}
If (msg = "fail "){
Validate = false; // Verification Failed
// Alert ("the username is duplicated! ");
Certificate ('your username'}.css ("display", "inline ");
}
}
});
});
$ ('# Createuser'). click (function (){
If ($ ('# userid'). val () = ""){
Validate = false;
Alert ("the user name cannot be blank! ");
Return;
}
If ($ ('# userpwd'). val () = ""){
Validate = false;
Alert ("the password cannot be blank! ");
Return;
}
If ($ ('# email'). val () = ""){
Validate = false;
Alert ("Email cannot be blank! ");
Return;
}
If (! IsEmail ($ ('# email'). val ())){
Validate = false;
Alert ("Incorrect Email format! ");
Return;
}
If (validate ){
$. Ajax ({
Type: "POST ",
Url: "Ajax/UserAjax. aspx? Action = reg ",
Data: "userid =" + escape ($ ('# userid '). val () + "& userpwd =" + escape ($ ('# userpwd '). val () + "& email =" + escape ($ ('# email '). val ()),
Success: function (msg ){
If (msg = "success "){
Alert ("registered successfully ");
}
If (msg = "fail "){
Alert ("registration failed! ");
}
}
});
}
});
});
Function isEmail (str ){
Var reg =/^ ([a-zA-Z0-9 _-]) + @ ([a-zA-Z0-9 _-]) + ((\. [a-zA-Z0-9 _-] {2, 3}) {1, 2}) $ /;
Return reg. test (str );
}
</Script>
<Div class = "box" style = "width: 280px; height: 230px;">
<H1>
Register <P>
New User? Register now </p>
<Form action = "" method = "post">
<Label>
<Span> User Name </span>
<Input type = "text" id = "userid" class = "input-text"/>
<B id = "username" style = "display: none; color: Red; display: none"> unavailable </B>
</Label>
<Label>
<Span> email </span>
<Input type = "text" id = "email" class = "input-text"/>
</Label>
<Label>
<Span> password </span>
<Input type = "password" id = "userpwd" class = "input-text"/>
</Label>
</Form>
<Div class = "spacer">
<A href = "#" id = "createUser" class = "green"> create an account </a> </div>
<Div class = "spacer">
If you have registered the account, log on to <a href = "#" onclick = "parent. tb_remove ()"> log on </a>.
</Div>
</Div>

User Logon:
Copy codeThe Code is as follows:
<Link type = "text/css" rel = "Stylesheet" href = "css/login.css"/>
<Link type = "text/css" rel = "Stylesheet" href = "css/thickbox.css"/>
<Script type = "text/javascript" src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript" src = "js/thickbox. js"> </script>
<Script type = "text/javascript">
$ (). Ready (function (){
// Use ajax to log on to the user. If the logon succeeds, the session is written.
$ ('# UserLogin'). click (function (){
If ($ ('# userid'). val () = "" | $ (' # userpwd '). val () = ""){
Alert ("the user name or password cannot be blank! ");
}
Else {
$. Ajax ({
Type: "POST ",
Url: "Ajax/UserAjax. aspx? Action = login ",
Data: "userid =" + escape ($ ('# userid '). val () + "& userpwd =" + escape ($ ('# userpwd '). val ()),
Success: function (msg ){
If (msg = "success "){
// Alert ('logon successful ');
// Document. location. href = "Default. aspx ";
Certificate ('{divlogin'}.css ("display", "none ");
Var welcome = "welcome" + $ ('# userid'). val () + ", <a href = 'ajax/CommonAjax. aspx? Action = logout'> exit </a> ";
Certificate ('your tempinfo').css ("display", "block ");
Welcome ('welcome tempinfo'welcome .html (welcome );
}
If (msg = "fail "){
Alert ("Logon Failed! ");
}
}
});
}
});
});
</Script>
<! -- Logon region -->
<% If (Session ["User"] = null)
{%>
<Div class = "box" id = "divLogin">
<H1>
Login <Form action = "" method = "post">
<Label>
<Span> account </span>
<Input type = "text" name = "email" id = "userid" style = "height: 20px; font-size: 16px;
Width: 120px "class =" input-text "/>
</Label>
<Label>
<Span> password </span>
<Input type = "password" name = "psw" id = "userpwd" style = "height: 20px; font-size: 16px;
Width: 120px "class =" input-text "/>
</Label>
</Form>
<Div class = "spacer">
<A href = "javascript:;" id = "userLogin" class = "green" style = "background: # 67a54b; color: # FFFFFF;
Text-decoration: none "> login </a> </div>
<Div class = "spacer">
Forgot password? <A href = "FindPwd.htm? KeepThis = true & TB_iframe = true & height = 250 & width = 300 & modal = true"
Class = "thickbox" style = "color: # 0033CC; background: # dfe4ee;"> retrieve password </a> <br/>
Not registered yet? <A href = "UserReg.htm? KeepThis = true & TB_iframe = true & height = 250 & width = 350 & modal = true"
Style = "color: # 0033CC; background: # dfe4ee;" class = "thickbox"> Registration </a>
</Div>
</Div>
<%}
Else
{%>
<Div id = "divUserInfo" style = "height: 80px;">
Welcome, <% = Session ["User"]. ToString () %>, <a href = "Ajax/CommonAjax. aspx? Action = logout "> exit </a>
</Div>
<% }%>
<Div id = "tempInfo" style = "height: 80px; display: none">
</Div>

The preceding css file and ajax processing pages are as follows:
Package reg.css, login.css, and userajax.rar
For thickbox-related information, you can download it from the official website.