js怎么实现点一个按钮弹出一个层?

JavaScript012

js怎么实现点一个按钮弹出一个层?,第1张

序说明:

要实现一个简单的LightBox效果,主要有两个部分:覆盖层和高亮层。

【跨浏览器的固定定位】

首先要先说说这个东西position:fixed,它的作用是跨浏览器的固定定位。

摘自详解定位与定位应用:

“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”

程序中很多地方利用了这个css,ie7、ff都支持这个css,但ie6不支持,程序中只能是在ie6模拟这个效果。

【覆盖层】

覆盖层的作用是把焦点限制在高亮层上,原理是通过一个绝对定位的层(通常使用div),设置它的宽度和高度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下),再给它设置一个比较高的zIndex来层叠在原有内容之上(但要比高亮层小),这样用户就只能点到这个层之上的内容了。

 // 所有class='WeiboImporWrap' 的元素绑定点击事件

 $('.WeiboImporWrap').click(function(){

             // 所有class='WeiboImporWrap' 的元素隐藏

            $('.WeiboImporWrap').hide()

           

        })