How to implement the successful login interface with jquery
This article mainly shows you "jquery how to achieve a successful login interface", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "jquery how to achieve a successful login interface" this article.
1. Preview
1) before logging in
2) Click login to show the login window (layer), at the same time, mask the main form content with a gray transparent layer, click "login", hide [login], show loading diagram, login failure, show [login], hide login chart, and display prompt information at the same time.
3) after logging in successfully, remove the mask layer and login layer, and display "Hello, xxx!"
2. Realize
Create a Web Site using VS2010, which is implemented in the master page Site.master. VS2010 automatically adds JQuery's js file to the Scripts folder and creates a master page and two forms Default.aspx and About.aspx based on this master page.
1) Login layer interface design, see the code in Site.master
FlyNoteBook
2) the code that implements the js file Scripts/common.js of the mask layer and the layer of the pop-up login interface. Note that some ID of the elements in the master page Site.master are hard-written inside.
$(function () {)
Var screenwidth, screenheight, mytop, getPosLeft, getPosTop
Screenwidth=$ (window). Width ()
Screenheight=$ (window). Height ()
/ / get the offset of the scroll bar from the top
Mytop=$ (document). ScrollTop ()
/ / calculate the left of pop-up layer
GetPosLeft=screenwidth / 2-200
/ / calculate the top of pop-up layer
GetPosTop=screenheight / 2-150
/ / css locates the pop-up layer
$("# divLoginWindow") Css ({"left": getPosLeft, "top": getPosTop})
/ / when the size of the browser window 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})
})
The above is all the contents of the article "how to achieve a successful login interface for jquery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
