Ajax+jquery realizes Lightbox communication with server

The Lightbox effect is also called the Windows shutdown effect. Just like when Windows shuts down, the application on the desktop fails and only clicks on several buttons in the box, such as the shutdown. In the Web page is actually using two layers. One of the settings is translucent to cover the entire screen, and the other is placed above it to display the content.

Before writing to see the effect of Cloudgamer, think of JavaScript skill is far less than him. After referring to his effect, he wrote this simple version and joined the Lightbox communication with the server.

In order to facilitate the demo, I wrote the code into a file, CSS is also directly written in the line.

First is the covering layer:

<div id="coverLayer" style=" display:none; background:#000000;　 position:absolute; "></div>　　　　

Don't let him show, black background, absolute positioning.

And then the Lightbox:

1 <div id= "LightBox" style= "Display:none; width:300px; height:200px;position:absolute;z-index:1001; Background: #ffffff; left:50%; top:50%; margin-left:-150px; margin-top:-100px; border: #00FFFF double 4px; " "
2 <a id=" Discover "href=" # "onclick=" discover (); " > Close </a>
3 <form id= "Formlogin"
4 <p> User name: <input id= "Tbusername" name= "Tbuser" Name "type=" text/></p>
5 <p> Password: <input id= "Tbpassword" name= "Tbpassword" type= "password"/&G T;</p>
6 <p><input id= "Btnlogin" name= "" type= "button" value= "Log In" onclick= "login ();"/></p
7 </form>
8 </div>
9

To communicate with the database, I put a form inside to get input. Two text boxes, one button. There is also a connection that closes the Lightbox. For the Lightbox style. First or not let it show, high, wide such a needless to say. Absolute positioning. Set Z-index to 1001 to ensure that he shows up on the top. White background. left:50%; top:50%; margin-left:-150px; margin-top:-100px to center; This is a more common way to set a block container centered in CSS. Of course, this is about the location of the container. This method is also mentioned in Cloudgamer's article. To learn more about CSS things can go to the standard road http://www.aa25.cn/or blue ideal http://www.blueidea.com/and other places. Of course, there are many in the garden. (like a bit of long-winded-_-) after a 4-pixel border is set to look good.

and a link to open Lightbox.

<a id= "Cover" href= "# onclick=" cover (); " > Login </a>

Click on him to perform cover (); Overwrite function.

Finally, a select is added to screen the test in IE

1　 <form >
2　　　　 <label>select
3　　　　　　　 <select name="select" id="select" >
4　　　　　　　　　　　 <option>测试Select覆盖</option>
5　　　　　　　　　　　 <option>测试Select覆盖</option>
6　　　　　　　 </select>
7　　　　 </label>
8 </form>