一段简单的 HTML 弹出一个对话框，灰掉原来的页面（网页）

最新推荐文章于 2024-07-14 12:56:12 发布

wxw_cool

最新推荐文章于 2024-07-14 12:56:12 发布

阅读量3.1k

点赞数

文章标签： html javascript class filter border div

本文链接：https://blog.csdn.net/YoungEngineer/article/details/2221645

版权

<html>
    <head>
        <title>LIGHTBOX EXAMPLE</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: 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><a href=" http://www.nextcool.cn" target="_blank">NextCool</a>收集整理,可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</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>