On the HTML 5 page, click the mask layer background to close the mask layer

Time:2021-6-7

Today, my team members received a demand. The demand is like this. Click the page button to pop up a red envelope pop-up window to display the black mask layer. Click the background of the mask layer and the pop-up window close button to close the pop-up window. So I made a demo to facilitate the next time I encounter this demand, and I will upload the code.

HTML code

There is only one display button on the page, one div with ID BG is used as the gray background mask layer, the div with ID pop is used as the red envelope pop-up window, and the div with ID close is used as the close button.

<body>
    < div class = BTN "id = BTN > < div > show
    <div class="bg" id="bg">
        <div class="popup" id="popup">
            <div class="close" id="close">X</div>
        </div>
    </div>
</body>

CSS code

There are no technical difficulties in the CSS code. The only thing to pay attention to is to give an absolute positioning to the mask layer of the gray background. It’s good that top and lefe are both 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 code

var btn = document.getElementById('btn');
    var bg = document.getElementById('bg');
    var popup = document.getElementById('popup');
    var closeBtn = document.getElementById('close');
    //Click the show button to display the pop-up window
    btn.addEventListener('click', ()=> {
        bg.style.display = 'block';
    });
    //Click the shadow mask layer to close the pop-up window
    bg.addEventListener('click', (e)=> {
        bg.style.display = 'none'
    });
    //To prevent bubbling, clicking the pop-up window will not execute the click event of the parent element
    popup.addEventListener('click', (e)=> {
        e.stopPropagation();
    });
    //Click the close symbol to close the pop-up window
    closeBtn.addEventListener('click', (e)=> {
        e.stopPropagation();
        bg.style.display = 'none'
    })

Here is the article about closing the mask layer by clicking the mask layer background on the HTML 5 page. For more information about closing the mask layer of HTML 5, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!