近来要做一个LightBox的效果，不过不用那么复杂，能显示一个内容框就行了。
这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。
不过showbo教了我position:fixed这个新特性，决定重写一遍。

如有什么问题或建议请务必提出，谢谢！

先看效果：

LightBox

选择效果显示

选择效果：
还原效果 定位效果 设置拖放 视框定位拖放

ps：“定位效果”的意思是屏幕滚动也能固定位置，“视框定位拖放”是把拖放范围固定在屏幕并加“定位效果”。

程序说明：

要实现一个简单的LightBox效果，主要有两个部分：覆盖层和高亮层。
而拖放功能跟上面的程序是完全独立的，可自行添加。

【跨浏览器的固定定位】

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

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

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

【覆盖层】

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

【覆盖屏幕】

覆盖层的关键就是如何做到覆盖整个屏幕，支持position:fixed的话很简单：

这样能把浏览器的视框覆盖了，其中使用了fixed样式，
这里的意思是定位在浏览器的视框，并100%覆盖。
注意不要理解错为这个层覆盖了整个页面，它只是把浏览器可视的部分覆盖了来达到效果。
ie6不支持怎么办？有几个方法：
1，做一个覆盖视框的层，并在onscroll时相应移动，在onresize时重新设大小；
2，做一个覆盖视框的层，在样式上模拟fixed效果；
3，做一个层覆盖了整个页面的层，并在onresize时重新设大小；

方法1的缺点是滚动时很容易露出马脚，而且不好看；方法2的缺点是需要页面结构的改动和body样式的修改，绝对不是好的架构；而我用的是方法3，有更好的方法欢迎提出。

用这个方法只有把position设为absolute，并设置相应的width和height即可：

要注意的是scrollWidth和clientWidth的区别，顺带还有offsetWidth，手册上的说明：
scrollWidth：Retrieves the scrolling width of the object.
clientWidth：Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
offsetWidth：Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

我的理解是：
scrollWidth是内容占的宽度，在有滚动条时相当于整个内容的宽度，在没有滚动条时仅仅只是内容部分宽度不包括补白部分。
clientWidth是可视部分宽度，在有滚动条时仅仅是可视部分的宽度，在没有滚动条时包括整个内容部分宽度加上可视范围内的补白部分。
offsetWidth是clientWidth可视部分宽度加上border和滚动条本身宽度。

这里一般情况下使用scrollWidth和clientWidth中比较大的值（即有滚动条时的scrollWidth和没有滚动条时的clientWidth）作为覆盖层的宽度就可以了，设宽度时是不包括滚动条部分的而documentElement一般也没有border，所以不需要offsetWidth。

上面可以看到我用的是documentElement而不是body，手册上是这样说的：
Retrieves a reference to the root node of the document.
意思是整个文档的根节点，其实就是html节点（body的上一级）。
在XHTML标准中对于整个文档的操作，一般应该使用documentElement而不使用body。

 

还要注意的是在onresize的时候scrollWidth和clientWidth的值会产生变化，所以需要在事件中重新设置宽度高度：

【覆盖select】

自定义的层给select遮挡住是一个老问题了，不过可喜的是ie7和ff都已经支持select的zIndex，只要给层设定高的zIndex就能覆盖select了，可惜对于ie6这个问题还是需要解决。

覆盖select据我所知有两个比较好的方法：
1，显示层时，先隐藏select，关闭层时再重新显示；
2，用一个iframe作为层的底，来遮住select。

方法1应该都明白，方法2就是利用iframe可以覆盖select的特性，只要把一个iframe作为层的底部就可以覆盖下面的select了，程序中是这样使用的：

可以看出这个透明的iframe也以同样覆盖整个页面，如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。

个人觉得使用方法2比较好，但始终是改变了页面结构，不保证在任何情况下都不对页面产生影响，至于方法1就比较保守，但安全安心。