Html之遮罩层

最新推荐文章于 2024-11-01 09:03:05 发布

缘不易

最新推荐文章于 2024-11-01 09:03:05 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_45834006/article/details/105859398

html5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种实现网页中按钮点击后显示悬浮窗并同时应用页面遮罩的方法。通过HTML、CSS和JavaScript的结合使用，实现了弹出窗口的布局、样式及交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制即用

<html>
<head lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .black_overlay {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: #c8c8c8;
                z-index: 1001;
                -moz-opacity: 0.8;
                opacity: .80;
                filter: alpha(opacity=78);
            }

            .pop_win {
                display: none;
                position: absolute;
                top: 10%;
                left: 23%;
                width: 55%;
                height: 75%;
                padding: 10px;
                border: 2px solid rebeccapurple;
                background-color: white;
                z-index: 9999;
                overflow: auto;
            }
        </style>
        <script type="text/javascript">
            function popWin() {
                document.getElementById('light').style.display = 'block';
                document.getElementById('fade').style.display = 'block'
            }

            function closeWin() {
                document.getElementById('light').style.display = 'none';
                document.getElementById('fade').style.display = 'none'
            }
        </script>
    </head>
<body>
<p>网页：单击按钮弹出悬浮窗+页面遮罩</p>
<a href="javascript:void(0)" οnclick="popWin();">请点这里</a>

<div id="light" class="pop_win">
    <a href="javascript:void(0)" οnclick="closeWin();" style="float: right;">[x]</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>