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

Ajax+jQuery实现LightBox与服务器通信2011-01-30 博客园咖啡不苦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

要与数据库通信，我放了一个表单在里面获取输入。两个文本框、一个按钮。还有一个关闭LightBox的连接。对于LightBox的样式。首先还是不让其显示，高、宽这样的就不用说了。绝对定位。设置z-index为1001保证他显示在最上面。白色背景。left:50%; top:50%; margin-left:-150px; margin-top:-100px;让其居中。这是css中一种比较常见的设置块状容器居中的方法。当然，这和容器的定位有关。cloudgamer的文章中也讲到了这种方法。要了解更多的关于css的东西可以去标准之路 http://www.aa25.cn/ 或者蓝色理想 http://www.blueidea.com/等地方。当然园子里也很多。（好像有点啰嗦-_-）之后是为了好看设置了一个4像素的边框。

再是要一个开启LightBox的链接

单击他就执行cover（）；覆盖函数。

最后加了一个select用于在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>