您當前位置：首頁 > web前端 > htmlcss > 用CSS實現lightbox效果，你想到了嗎？

用CSS實現lightbox效果，你想到了嗎？

來源：程序員人生發布時間：2013-12-30 19:06:18 閱讀次數：2717次

　　網(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.jyygyx.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg"/></a></p><div id="light" class="white_content"><img src="http://www.jyygyx.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/zhuanti/view/0813/1-0ZQ31R352K3.jpg"/><div class="description"><a href="http://www.jyygyx.com/a/view/7621.html" _fcksavedurl="http://www.jyygyx.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.jyygyx.com/uploads/userup/87/close.gif" _fcksavedurl="http://www.jyygyx.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關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

用CSS實現lightbox效果，你想到了嗎？