如何制作Lightbox效果?

2016-07-11 1262 0 编辑:Monster 来源:相关书籍

所谓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中需要将网页上传到服务器中才能看到正确的效果。


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联