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

╰半橙微兮° 2022-09-03 15:25 226阅读 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-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>

效果：

![5b5eebb259113496f7d11a1f101954c0.png][]

[5b5eebb259113496f7d11a1f101954c0.png]: /images/20220829/bcf7d98453a244249ab3099de682e710.png