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

核心提示： 要与数据库通信，我放了一个表单在里面获取输入，Ajax+jQuery实现LightBox与服务器通信(2)，两个文本框、一个按钮，还有一个关闭LightBox的连接，这个函数只是让遮盖层和LightBox显示出来，并影藏所有的select，对于LightBox的样式，首先还是不让其显示

要与数据库通信，我放了一个表单在里面获取输入。两个文本框、一个按钮。还有一个关闭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的链接

<a id="cover" href="#" onclick="cover();">登录</a>

单击他就执行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>

之后是JavaScript。

先看一下cover（）；覆盖函数，这个函数只是让遮盖层和LightBox显示出来，并影藏所有的select，以免在IE中效果有误。

　1<script type="text/javascript" >
　2　　　 function cover()
　3　　　 {
　4　　　　　　　 $("select").each(function(){this.style.visibility="hidden";})
　5　　　　　　　 //选择所有的select并设置为隐藏
　6　　　　　　　　 $("#coverLayer").fadeTo("fast",0.5,function(){$("#coverLayer").css("display","block");})
　7　　　　　　　　　　　　　　　　　　　　　　　 .width(Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth))
　8　　　　　　　　　　　　　　　　　　　　　　　 .height(Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
　9　　　　　　　 //显示覆盖层 并设置其高和宽
10　　　　　　　 $("#lightBox").show();
11　　　　　　　 //显示LightBox层
12　　　 }
13</script>