用CSS实现lightbox效果，你想到了吗？_html-js-css

概述网(LieHuo.Net)教程除了动态表现外基本实现了lightbox的效果。代码比较多，我只贴出核心代码，如果对此感兴趣可以下载我附上的文件后细细研究。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用CSS实现lightbox效…

　　内存溢出 jb51.cc 除了动态表现外基本实现了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，很简单。

总结

以上是内存溢出为你收集整理的用CSS实现lightbox效果，你想到了吗？全部内容，希望文章能够帮你解决用CSS实现lightbox效果，你想到了吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1022973.html