纯CSS Lightbox效果

最新推荐文章于 2014-01-10 08:18:59 发布

原创最新推荐文章于 2014-01-10 08:18:59 发布 · 786 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #filter #border #html #class

C# 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种仅使用CSS来创建lightbox（一种用于展示放大的图片或其他内容的遮罩层效果）的方法。通过定义特定的样式，可以在不依赖JavaScript的情况下展示lightbox内容，并提供关闭选项。该方法利用了CSS的显示属性和定位来实现遮罩层和内容盒子。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>纯CSS Lightbox效果</title> <mce:style></mce:style><style mce_bogus="1"> .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: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body > <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> <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> <div id="fade" class="black_overlay"></div> </body> </html>