LIGHTBOX弹出层插件，JS+CSS不错的遮罩层效果

　　LIGHTBOX弹出层插件，JS+CSS不错的遮罩层效果。通过这个演示代码，让您学习和快速掌握该代码的使用，JS+CSS的简洁代码完成的一个遮罩层，非常不错的说，大家来收藏一下吧。

　　示例：

<html><br /> <head><br /> <title>LIGHTBOX EXAMPLE - Liehuo.Net</title><br /> <style><br /> .black_overlay{<br /> display: none;<br /> position: absolute;<br /> top: 0%;<br /> left: 0%;<br /> width: 100%;<br /> height: 100%;<br /> background-color: black;<br /> z-index:1001;<br /> -moz-opacity: 0.8;<br /> opacity:.80;<br /> filter: alpha(opacity=80);<br /> }<br /> .white_content {<br /> display: none;<br /> position: absolute;<br /> top: 25%;<br /> left: 25%;<br /> width: 50%;<br /> height: 50%;<br /> padding: 16px;<br /> border: 16px solid orange;<br /> background-color: white;<br /> z-index:1002;<br /> overflow: auto;<br /> }<br /> </style><br /> </head><br /> <body><br /> <p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p><br /> <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div><br /> <div id="fade" class="black_overlay"></div><br /> </body><br /> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

LIGHTBOX弹出层插件，JS+CSS不错的遮罩层效果

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

LIGHTBOX弹出层插件，JS+CSS不错的遮罩层效果

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀