兼容版本js+css锁屏效果源代码
纯css实现div Lightbox遮罩层效果(可滚动,已修复兼容IE6、7、8和火狐)
.wrapper { border:1px solid #e6e6e6;padding:50px;}
.black_overlay{ position:fixed; z-index:1000;width:100%;height:100%;top:0;left:0;
filter: alpha(opacity=80);opacity: 0.8;overflow: hidden;background-color: #000;}
*html { background:url(*) fixed; }
*html body { margin:0; height:100%; }
*html .black_overlay{ position:absolute; left:expression_r(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top:expression_r(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
.white_content { display:none;position:absolute;top:15%;left:25%;width:632px;height:445px;border:16px solid #FFF;border-bottom:none;background-color:white;z-index:1002;overflow:auto;}
html
<div class="wrapper">
<p style="font-size:50px"><a href="#" onclick="document.getElementByIdx_x('light').style.display='block';document.getElementByIdx_x('fade').style.display='block'">点我试下</a></p>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementByIdx_x('light').style.display='none';document.getElementByIdx_x('fade').style.display='none'">关闭</a></div>
<div id="fade" class="black_overlay" style="display:none;"></div>
<p style=" height:2000px;">朝夕网banner免费制作</p>
</div>