[转载][HTML] 普通的DIV分层以及版透明效果

最新推荐文章于 2025-07-09 11:23:59 发布

weixin_34106122

最新推荐文章于 2025-07-09 11:23:59 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Liangw/p/3165088.html

本文提供了一个使用HTML、CSS和JavaScript实现的简易lightbox效果示例。通过简单的点击操作即可展示lightbox，并可通过关闭按钮将其隐藏。该示例包括lightbox的基本样式设置及显示隐藏的交互逻辑。

来源忘记哪的了，我稍微做了点修改，想了想还是挂了转载的标签，嗯嗯：

<html> 
<head>
<title>EXAMPLE</title>
</head>
    <body>
        <p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
        <div id="light" style="display:none;position:absolute;top: 25%;left:25%; width:50%;height:50%;padding:16px;border:16px solid orange;background-color:white;z-index:2;overflow:auto;">
         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" style="display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);">
        </div>
    </body>
</html>