溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在Html5中如何實(shí)現(xiàn)頁面點(diǎn)擊遮罩層背景和關(guān)閉遮罩層效果

發(fā)布時(shí)間：2022-02-22 14:18:04 來源：億速云 閱讀：637 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹在Html5中如何實(shí)現(xiàn)頁面點(diǎn)擊遮罩層背景和關(guān)閉遮罩層效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

html代碼：

頁面上只有一個(gè)展示的按鈕，一個(gè)ID為bg的div作為灰色背景遮罩層使用，ID為popup的div作為紅包彈窗，ID為close的div作為關(guān)閉按鈕。

<body>
    <div class="btn" id="btn">展示</div>
    <div class="bg" id="bg">
        <div class="popup" id="popup">
            <div class="close" id="close">X</div>
        </div>
    </div>
</body>

CSS代碼

css代碼里面沒什么技術(shù)難點(diǎn)，唯一要注意的是要給灰色背景的遮罩層一個(gè)絕對(duì)定位，top和lefe都為0就好了

    body {
        position: relative;
    }
    .btn {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin:20px auto 0;
        border: 1px solid #333;
        border-radius: 10px;
    }
    .bg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .6);
        display: none;
    }
    .popup {
        width: 260px;
        height: 320px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
     }
    .popup .close {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        top: -40px;
        right: 0px;
        border: 1px solid #999;
        border-radius: 50%;
        color: #999;
    }

JS代碼：

    var btn = document.getElementById('btn');
    var bg = document.getElementById('bg');
    var popup = document.getElementById('popup');
    var closeBtn = document.getElementById('close');
    // 點(diǎn)擊展示按鈕顯示彈窗
    btn.addEventListener('click', ()=> {
        bg.style.display = 'block';
    });
    // 點(diǎn)擊陰影遮罩層關(guān)閉彈窗
    bg.addEventListener('click', (e)=> {
        bg.style.display = 'none'
    });
    // 阻止冒泡事件，點(diǎn)擊彈窗不會(huì)執(zhí)行父元素的點(diǎn)擊事件
    popup.addEventListener('click', (e)=> {
        e.stopPropagation();
    });
    // 點(diǎn)擊關(guān)閉符號(hào)關(guān)閉彈窗
    closeBtn.addEventListener('click', (e)=> {
        e.stopPropagation();
        bg.style.display = 'none'
    })

以上是“在Html5中如何實(shí)現(xiàn)頁面點(diǎn)擊遮罩層背景和關(guān)閉遮罩層效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手