实现lightbox效果
lightbox效果(点击下面的图片!):
实现这个lightbox的原理很简单:添加一个div层用来显示黑色透明的那个覆盖层(用z-index来实现);再添加一个div层,用来显示中间要显示的内容(也是用z-index来实现,不过这个值要比覆盖层的大)。代码很简单,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LIGHTBOX</title> <style> .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: 50%; left: 50%; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://img3.douban.com/img/fmadmin/chlBanner/14790.jpg" alt="lobster" width="100" height="100" /></a> <div id="light" class="white_content"> <img src="http://img3.douban.com/img/fmadmin/chlBanner/14790.jpg" alt="lobster" style="width:200px;height:200px;" /> </div> <div id="fade" class="black_overlay"> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" style="position:absolute;left:65%;top:45%;color:red;">Close</a> </div> </body> </html>