网页：单击按钮弹出悬浮窗+页面遮罩

最新推荐文章于 2022-06-25 13:48:13 发布

木子欢儿

最新推荐文章于 2022-06-25 13:48:13 发布

阅读量1.1k

点赞数 2

文章标签： js javascript css html sms

本文链接：https://blog.csdn.net/muzihuaner/article/details/119529647

版权

JavaScript 悬浮窗页面遮罩按钮点击 CSS样式

关键词由CSDN通过智能技术生成

<html>

<head lang="en">

    <head>
        <meta charset="UTF-8">
        <meta  charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

        <style>
            .black_overlay {
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: #222;
                z-index: 1001;
                -moz-opacity: 0.8;
                opacity: .80;
                filter: alpha(opacity=78);
            }

            .pop_win {
                display: none;
                position: absolute;
                top: 10%;
                left: 20%;
                width: 60%;
                height: 75%;
                padding: 10px;
                border: 2px solid #3b3e41;
                background-color: white;
                z-index: 9999;
                overflow: auto;
                border-radius: 25px;
            }
            .fancybox-button {
                background: rgba(30, 30, 30, .6);
                border: 0;
                border-radius: 0;
                box-shadow: none;
                cursor: pointer;
                display: inline-block;
                height: 44px;
                margin: 0;
                padding: 10px;
                position: relative;
                transition: color .2s;
                vertical-align: top;
                visibility: inherit;
                width: 44px;
            }
        </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)" onclick="popWin();">请点这里</a>

    <div id="light" class="pop_win">

    </div>
    <div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="closeWin();" style="float: right;"
            class="fancybox-button fancybox-button--close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"></path></svg></a></div>
</body>

</html>

效果：

木子欢儿

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
网页：单击按钮弹出悬浮窗+页面遮罩

<html><head lang="en"> <head> <meta charset="UTF-8"> <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-...
复制链接

扫一扫