js弹出层.doc

JavaScript仿LightBox内容显示效果相关推荐:AlertBox弹出层(信息提示框)效果近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了。这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层。不过showbo教了我position:fixed这个新特性,决定重写一遍。先看效果:ps:“定位效果”的意思是屏幕滚动也能固定位置。程序说明:要实现一个简单的LightBox效果,主要有两个部分:覆盖层和高亮层。【跨浏览器的固定定位】首先要先说说这个东西position:fixed,它的作用是跨浏览器的固定定位。摘自详解定位与定位应用:“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed;他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”程序中很多地方利用了这个css,ie7、ff都支持这个css,但ie6不支持,程序中只能是在ie6模拟这个效果。【覆盖层】覆盖层的作用是把焦点限制在高亮层上,原理是通过一个绝对定位的层(通常使用div),设置它的宽度和高度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下),再给它设置一个比较高的zIndex来层叠在原有内容之上(但要比高亮层小),这样用户就只能点到这个层之上的内容了。如果初始化时没有提供覆盖层对象,程序中会自动创建:=$()||(("div"),[0]);()导致IE已终止操作bug,所以用了insertBefore。。【覆盖屏幕】覆盖层的关键就是如何做到覆盖整个屏幕(锁定整个页面),支持position:fixed的话很简单:with(){display="none";zIndex=;left=top=0;position="fixed";width=height="100%";}这样能把浏览器的视框覆盖了,其中使用了fixed样式,这里的意思是定位在浏览器的视框,并100%覆盖。注意不要理解错为这个层覆盖了整个页面,它只是把浏览器可视的部分覆盖了来达到效果。ie6不支持怎么办?有几个方法:1,做一个覆盖视框的层,并在onscroll时相应移动,在onresize时重新设大小;2,做一个覆盖视框的层,在样式上模拟fixed效果;3,做一个层覆盖了整个页面的层,并在onresize时重新设大小;方法1的缺点是滚动时很容易露出马脚,而且不好看;方法2的缺点是需要页面结构的改动和body样式的修改,绝对不是好的架构;而我用的是方法3,有更好的方法欢迎提出。用这个方法只要把position设为absolute,并使用一个_resize方法来设置width和height即可:Code要注意的是scrollHeight和clientHeight的区别(用Height容易测试),顺带还有offsetHeight,手册上的说明:scrollHeight::Retrievestheheightoftheobjectincludingpadding,butnotincludingmargin,border,:Retrievestheheightoftheobjectrelativetothelayoutorcoordinateparent,:scrollHeight是对象的内容的高度;clientHeight是对象的可视部分高度;offsetHeight是clientHeight加上border和滚动条本身高度。举个例子吧,先说说clientHeight和offsetHeight的区别(在ie7中测试):测的是外面的div,offsetHeight和clientHeight相差17(分别是83和100),这个相差的就是那个滚动条本身的高度。再看看clientHeight和scrollHeight的区别(下面是模拟在ie中的情况):可以看到clientHeight不受内容影响,都是8