Ajax+jQuery实现LightBox与服务器通信

核心提示：LightBox效果又叫windows关机效果，就是像windows关机时一样，Ajax+jQuery实现LightBox与服务器通信，桌面上的应用失效而只能点击关机等框内的几个按钮，在网页中其实就是利用了两个层，我把代码都写到一个文件里了，css也直接写在行内，其中一个设置成半透明遮住整个屏幕，另一个放在其上面用来显

LightBox效果又叫windows关机效果。就是像windows关机时一样，桌面上的应用失效而只能点击关机等框内的几个按钮。在网页中其实就是利用了两个层。其中一个设置成半透明遮住整个屏幕，另一个放在其上面用来显示内容。

在写之前看过了cloudgamer的效果，自认JavaScript功力远不及他。参考了他的效果之后写了这个简单版并加入了LightBox与服务器的通信。

为了方便演示，我把代码都写到一个文件里了，css也直接写在行内。

首先是覆盖层：

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

先不让他显示、黑色背景、绝对定位。

然后是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();">关闭</a>
3　　　　　　　 <form id="formLogin">
4　　　　　　　 <p>用户名：<input id="tbUserName" name="tbUserName" type="text" /></p>
5　　　　　　　 <p>密码：<input id="tbPassword" name="tbPassword" type="password" /></p>
6　　　　　　　 <p><input id="btnLogin" name="" type="button" value="登录" onclick="Login();" /></p>
7　　　　　　　 </form>
8　　　 </div>
9