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

时间：2023-12-25 15:41:43

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

<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>

相关文章