如何制作Lightbox效果？

所谓Lightbox,其实是现在网页上很常见的一种效果，例如单击网页上某个链接或图片，则整个网页会变暗，并在网页中间弹出一个层来，此时用户只能在层上进行操作，不能再单击变暗的网页。

制作Lightbox效果步骤是:首先在网页中插入一个和整个网页一样大的div，设置它为绝对定位，并设置它的z-index值仅小于弹出框，背景色为黑色，在默认情况下不显示;当单击网页上某个链接时，则显示这个div，并设置它的透明度为7000，这样就会有一个黑色的半透明层覆盖在网页上，使网页看起来像变暗了一样，而且这个层将挡住网页上所有的链接等元素，使用户单击不到它们;同时弹出一个较小的绝对定位的div，放置在网页的中间作为弹出框。具体步骤如下。

1)写结构代码

由于需要一个层覆盖在网页上，还需要另一个层做弹出框，因此结构代码中有两个div。

2)设置覆盖层的CSS样式

覆盖层不能占据网页空间，所以应设置为绝对定位，而且必须和网页一样大，因此设置它的位置为"top:0%;left:0%",大为"width:100%; height:100%;"。

3)设置弹出框的CSS样式

弹出框也是一个绝对定位元素，并且初始时不显示，它的z-index值应最大，这样才会在覆盖层的上方显示。

4)编写打开弹出框JavaScript代码

当鼠标单击a元素时，要同时显示覆盖层和弹出框。

而且单击a元素时，不能链接到其他网页，也不能设置href=“#"，那样会跳转到页面的顶端，可以设置为href="JavaScript:void(0) "，这样单击时页面不会发生跳转。

5)编写弹出框的“关闭”按钮代码

单击弹出框的“关闭”按钮后，应同时隐藏弹出框和覆盖层，回到初始状态。

这样一个简单的Lightbox效果就做好了，但是在IE6中需要将网页上传到服务器中才能看到正确的效果。