您当前位置：首页 > web前端 > htmlcss > 用CSS实现lightbox效果，你想到了吗？

用CSS实现lightbox效果，你想到了吗？

来源：程序员人生发布时间：2013-12-30 19:06:18 阅读次数：2469次

　　网(LieHuo.Net)教程除了动态表现外基本实现了lightbox的效果。代码比较多，我只贴出核心代码，如果对此感兴趣可以下载我附上的文件后细细研究。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用CSS实现lightbox效果，你想到了吗？ - LIEHUO.NET</title><style>img{border:none;}.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}.white_content {display: none;position: absolute;top: 5%;left: 15%;width: 706px;height: 495px;padding: 16px;border: 16px solid #eee;background-color: white;z-index:1002;overflow: auto;}.close{display:block;width:56px;height:20px;z-index:1103;position:absolute;bottom:0px;right:0px;line-height:20px;}.close img{float:right;}.close a{font:bold 14px/130% "5b8b4f53",Tahoma, Helvetica, Arial, sans-serif;color:#000;text-decoration:none;}.description{position:absolute;bottom:5px;left:8px;color:#656565;font:bold 12px "5b8b4f53";}</style></head><body><p><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img width="80" height="82" src="http://www.wfuyu.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg"/></a></p><div id="light" class="white_content"><img src="http://www.wfuyu.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg"/><div class="description"><a href="http://www.wfuyu.com/a/view/7621.html" _fcksavedurl="http://www.wfuyu.com/a/view/7621.html" target="new">Linux操作系统系列教程……</a></div><div class="close"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://www.wfuyu.com/uploads/userup/87/close.gif" _fcksavedurl="http://www.wfuyu.com/uploads/userup/87/close.gif"/>关闭</a></div></div><div id="fade" class="black_overlay"></div></body></html>
提示：可修改后代码再运行!

以下为引用的内容：
<style>
img{border:none;}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 603px;
height: 475px;
padding: 16px;
border: 16px solid #eee;
background-color: white;
z-index:1002;
overflow: auto;
}

　　遮罩层是用一个满屏带透明的层实现的，也用到了一点javascript，很简单。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 jQuery中的事件总结

下一篇 IE下setTimeout传参数bug的解决方法

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点