Jquery+ajax Implementation Mask Layer Login verification interface (with source code) _jquery

jquery Mask Layer Login Interface effect implementation, AJAX implementation login verification, the end of the article has a complete sample source download, Welcome to study.

Operating System: WINDWOS7 Ultimate

Development tools: Visual Studio 2010

Database: SQL Server 2005

Test browser: IE8, FF3.6.8, Google Chrome (IE8 in the pop-up login layer will appear after the vertical pull bar, the other two did not appear, the vertical bar can be modified in JS by modifying the value of the number so that it does not appear, but the following will appear white edge, more and more feel ie a bit of that ... ）
1, preview

1) before login

2) Click Login to display the login window (layer), at the same time with a gray transparent layer mask main form content, click "Login", hide "login", show loading map, login failure, display "login", hidden login map, while displaying the message

3 after successful login, remove the mask layer and login layer, show "xxx, Hello!" ”

2. Realize

Use VS2010 to create a Web Site that is implemented in the master page Site.master. VS2010 will automatically add jquery JS files to the Scripts folder and create a master page and a default.aspx and about.aspx two forms based on this master page.

1 Login Layer interface design, see the code in the Site.master

<%@ Master language= "C #" autoeventwireup= "true" codefile= "Site.master.cs" inherits= "Sitemaster"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" >  

     2) A JS file that implements the layer of the mask layer and the pop-up login interface scripts/ Common.js Code, note that the inside is hard to write the ID of the element in the master page Site.master

$ (function () {var screenwidth, screenheight, Mytop, getposleft, Getpostop screenwidth = $ (window). width ();
 ScreenHeight = $ (window). Height ();
 Gets the offset Mytop = $ (document) from the top of the scroll bar. scrolltop ();
 Calculates the left getposleft = SCREENWIDTH/2-200 of the pop-up layer;
 Calculates the top getpostop = SCREENHEIGHT/2-150 of the pop-up layer;
 CSS positioning pop-up layer $ ("#divLoginWindow"). CSS ({"Left": Getposleft, "Top": Getpostop});
 When the browser window size changes $ (window). Resize (function () {screenwidth = $ (window). width ();
 ScreenHeight = $ (window). Height ();
 Mytop = $ (document). ScrollTop ();
 Getposleft = SCREENWIDTH/2-200;
 Getpostop = SCREENHEIGHT/2-150;
 $ ("#divLoginWindow"). CSS ({"Left": Getposleft, "top": Getpostop + mytop});
 });
 When pulling the scroll bar, the pop-up layer moves $ (window). Scroll (function () {screenwidth = $ (window). width ();
 ScreenHeight = $ (window). Height ();
 Mytop = $ (document). ScrollTop ();
 Getposleft = SCREENWIDTH/2-200;
 Getpostop = SCREENHEIGHT/2-150;
 $ ("#divLoginWindow"). CSS ({"Left": Getposleft, "top": Getpostop + mytop});
 }); //Click on the link pop-up login window $ ("#popup"). Click (function () {$ ("#divLoginWindow"). FadeIn ("slow");//toggle ("slow");
 $ ("#txtUserName"). focus ();
 Gets the height of the page document var docheight = $ (document). Height ();
 Append a layer to make the background gray $ ("body"). Append ("<div id= ' Greybackground ' ></div>");
 $ ("#greybackground"). CSS ({"opacity": "0.5", "Height": docheight});
 return false;
 });
 Click the Close button $ ("#closeBtn"). Click (function () {$ ("#divLoginWindow"). Fadeout ("slow");////hide ();
 Remove the dimmed layer $ ("#greybackground"). Remove ();
 return false;
});

}); 

 Replace the captcha picture function ChangeCode (obj) {obj.src = "code.aspx?" + Math.random ();}

     3) Click "Login" to implement the Ajax login verification function of the JS file scripts/login.js code

var count = 0;
$ (document). Ready (function () {
 $ ("#loading"). Hide ()
});

function Checklogin () {
 $ ("#alogin"). Hide ();
 $ ("#loading"). Show ();
 var Txtcode = $ ("#txtCode");
 var txtname = $ ("#txtUserName");
 var txtpwd = $ ("#txtPassword");
 $.ajax ({
 URL: checklogin.aspx?) Code= "+ txtcode.val () +" &name= "+ txtname.val () +" &pwd= "+ txtpwd.val (),
 type:" POST ",
 datatype:" Tex T ",
 success:function (returnvalue) {
 if (returnvalue!=" false ") {
 $ (" #popup "). Hide ();
 $ ("#showMes"). Hide ();
 $ ("#loginSuccess"). HTML (returnvalue + ', hello! ');
 $ ("#divLoginWindow"). Remove ();
 $ ("#greybackground"). Remove ();
 $ ("#showMes"). Hide ();
 else {
 count = count + 1;
 $ ("#loading"). Hide ();
 $ ("#alogin"). Show ();
 $ ("#showMes"). Show ();
 $ ("#showMes"). HTML ("<font color=red> login failed, please check and try again!" ("+ Count + Times") </font>}
 }
 )
}

4 The requested checklogin.aspx background code, the foreground clears the left page command line

Using System;
Using System.Data;

public partial class CheckLogin:System.Web.UI.Page
{
 protected void Page_Load (object sender, EventArgs e)
 {
 try
 {
 String strcode = request.querystring[' Code '];
 String strName = request.querystring["Name"];
 String strpassword = request.querystring["PWD"];

 if (strcode!= session["Code"). ToString ())
 {
 Response.Write ("false");
 }
 else
 {
 DAO. SqlHelper helper = new DAO. SqlHelper ();
 DataTable dt = Helper. Filldatatable (String.Format ("Select Username,truename from Clients Where username= ' {0} ' and
  password= ' {1} '") StrName,
  strpassword
  ));
 if (dt!= null && dt. Rows.Count > 0)
 {
  session["truename"] = dt. rows[0]["Truename"]. ToString ();
  Response.Write (dt. rows[0]["Truename"]. ToString ());
 }
 else
 {
  Response.Write ("false");
 }} Catch
 {
 Response.Write ("false");
 }
 }

SOURCE Download: Jquery+ajax Implementation Mask Layer Login Verification interface

The above is the jquery implementation Mask Layer login interface, AJAX implementation of all the content of login verification, I hope to help you learn something