仿Lightbox效果（Windows关机效果），div覆盖，锁定页面及IE 6实现position:fixed;

Lightbox效果，也可以叫Windows关机效果，最常见的用法就是页面上弹出一个css设置的提示或对话框，但在后面又覆盖了一个层，使网页的其他部分不可点击。

 

原理：

定义一个浮层，定位方式为fixed，高宽都为屏幕可见高宽，这样当页面长度很短或太长需要滚动页面时，这个覆盖层就可以一直覆盖在浏览器整个可见区域，同样原理需要用户进行交互的高亮层也是这个效果。这里面一般要用到的效果有：

1. 定义浮层的宽高
   
2. 层的半透明效果
3. 为实现兼容，IE 6中实现fixed效果
4. 高亮层居中

1、设置浮层宽高

只要将浮层的css样式的宽高设置成100%就可以了（fixed实现前，IE 6没效果）。

 

之所以在这里提出来是因为自己之前错误的以为定义position为absolute，然后设置这个浮层足够大，大到覆盖整个html，这时可以用

 

divObj.style.width = Math.max(document.documentElement.scrollWidth, 
                                 document.documentElement.clientWidth);
divObj.style.height = Math.max(document.documentElement.scrollHeight, 
                                 document.documentElement.clientHeight); 

 

来获得页面文档的宽高，如果页面较小不够一屏，就得到可见区域大小，这样做在FF和IE 7下正常，但IE 6宽高都会多出一个滚动条的宽度来，需要再减去这个尺寸。另外这样做在改变窗口大小时，浮层大小不会变，这样就又会出问题了，因此，只能用定义position为fixed的方式。

如果被覆盖的页面原可见部分包含<select/>，那么它会“透”出来，这时一种方法是调用浮层时隐藏<select/>，另一种方法就是再设一个<iframe/>作为浮层覆盖<select/>，它就不会透出来了。

2、设置层的半透明

这个没什么特别的，只要区分IE就行了：

opacity:.4;/*非IE*/

filter:alpha(opacity=40);/*IE*/

3、IE 6实现fixed效果

fixed是相对于html标记来定位的 ，因此要实现fixed定位，就要将html设置为一屏大小，而body则填充满html即可（滚动条是body的滚动条，页面滚动滚动的是body），超高时会自动出现滚动条。在IE 6下如果定义

 

<!--[if lt IE 7]>
<style type="text/css">
html{overflow:hidden;}/*定义html为一屏大小，超出则hidden*/

/*body必须定义overflow:auto;否则不出现滚动条
   如果不定义高度，浮层的高度也无从定义
   另外，body还要去除margin，否则滚动条不在最右边，一般在定义css初就应设置这个属性*/
body{overflow:auto;height:100%;}

/*对IE 6要设置成绝对定位，如果设置right的话，注意右边界是包括滚动条的，试一下right:0;就看出来了*/
.fixed{position:absolute;}
</style>
<![endif]-->

 

上面说的是纯css实现这种效果，也可以用js替代，最常用的就是在css里面应用expression来引用js代码，但我测试着效果不是很理想，尤其是这种整屏覆盖的图层，滚动时，下面明显晃动一条白线。

4、层居中

一般页面居中的方式在IE下是设置父级层text-align:center;，对于非IE用margin:0 auto;（别忘了定义宽度），但如果层定义了position:absolute;，那这种居中就不管用了。

 

<style type="text/css">
<!--
.box{width:300px;height:230px;background-color:#fff;
         position:absolute;top:50%;left:50%;
         margin:-115px 0 0 -150px;}
-->
</style>

 

上面这种方法是先让层左上角的那一点居中，然后在通过负的margin值让层的中心基本居中。如果页面已经向下滚动了一些，那么垂直方向上这么做就无法居中了，只能计算top的尺寸了。