仿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的方式。

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