当前位置:编程学习 > html/css >>

兼容版本js+css锁屏效果源代码

纯css实现div Lightbox遮罩层效果(可滚动,已修复兼容IE6、7、8和火狐)


CSS
.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>
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,