博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

兼容IE6、7、8和火狐的遮罩层效果实现

Posted on 2011-04-07 12:43  低调地享受  阅读(472)  评论(0编辑  收藏  举报

CSS样式:

.overlay{position: fixed; z-index: 100000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=50);opacity: 0.5;overflow: hidden;background-color: #000;}
*html 
{ background:url(*) fixed; }
*html body 
{ margin:0; height:100%; }
*html .overlay
{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }

遮罩层HTML代码:

<div id="overlay" class="overlay" style="display:none"></div>

将上述代码添加到页面中,通过js函数控制“overlay”层的显示和隐藏来实现遮罩效果