首页 > 其他分享 >单击按钮弹出悬浮窗+页面遮罩

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

时间:2022-08-21 20:33:48浏览次数:100  
标签:遮罩 none 单击 style getElementById document border display 页面

代码

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

效果:

去这里看:https://kwcdn.vercel.app/tc.html

标签:遮罩,none,单击,style,getElementById,document,border,display,页面
From: https://www.cnblogs.com/wdysblog/p/16610795.html

相关文章