CSS implements a pop-up window effect with a mask layer that can be closed

Pop-up windows are often used in actual development. When I was learning CSS3, I found that I could use pure CSS to implement a pop-up window with a mask layer that can be closed.

To use CSS3 to implement a pop-up window with a closable mask layer, you need to use the :target pseudo-class, ::before and ::after pseudo-elements.

Code to implement the pop-up window:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*Close the popup window*/
        .popBox {
            display: none;
        }

        /*Open popup window*/
        .popBox:target {
            align-items: center;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        /*Set pop-up content*/
        .popBox .con {
            background-color: rgba(250, 188, 199, 0.76);
            border-radius: 5px;
            padding: 1.5rem;
            position: relative;
            width: 25rem;
        }

        /*Close button*/
        .popBox .close {
            display: block;
            position: relative;
        }

        .popBox .close::after {
            align-items: center;
            color: white;
            content: "×";
            cursor: pointer;
            background-color: rgba(79, 79, 79, 0.9);
            border-radius: 50%;
            display: flex;
            font-size: 1.25rem;
            justify-content: center;
            position: absolute;
            right: -2.5rem;
            top: -2.5rem;
            height: 2rem;
            width: 2rem;
            z-index: 2;
        }

        /*Popup window mask*/
        .popBox::before {
            content: "";
            cursor: default;
            background-color: rgba(173, 173, 173, 0.66);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#example1">Case 1</a></li>
    <li><a href="#example2">Case 2</a></li>
</ul>

<article class="popBox" id="example1">
    <div class="con">
        <a href="#" class="close"></a>
        <p>A case is a typical statement of events with multiple meanings that people experience in their production and life. It is an intentional excerpt from the stories that people go through. A case generally consists of three major elements. Cases are of great significance to people's learning, research, and life reference. Case-based teaching is an effective vehicle for delivering targeted educational significance to people through cases. </p>
    </div>
</article>

<article class="popBox" id="example2">
    <div class="con">
        <a href="#" class="close"></a>
        <p>A case is a typical multi-meaning event statement that people experience in production and life. It is a deliberate interception of the stories people experience. Cases generally include three major elements. Cases are of great significance to people's learning, research, and life reference. Case-based teaching is an effective carrier to convey targeted educational significance to people through cases.</p>
    </div>
</article>
</body>
</html>

The effect is shown in the following picture

insert image description here

Additional knowledge points:

Click the background of the mask layer to close the mask layer

When imitating Huawei's official website, I found that there is a mask layer on Huawei's official website. You can close the mask layer by clicking on the background of the mask layer, but the mask layer will not be closed by clicking on the content area. So I started to imitate this case study, and even the content was exactly the same (because the purpose of this exercise was to write the same effect as Huawei's or better effect). At the beginning, I wrote it like this (Figure 1)

insert image description here

Figure 1

I gave class=Select_Region_bj a gray translucent background style, and later wrote the onclick event in Javascript. No matter how I wrote it, clicking on the content area would close the mask layer. I couldn't figure out how to write it so that the content area would not be closed when clicked. Later, during the break, I saw that my classmate had written a program that could click the content area without closing the mask layer. I asked him how he wrote it, and he told me: "Just separate them." I thought about it for a while and thought: Separate? How to separate? As I kept patching, I finally separated the background and content areas. Separate write (Figure 2)

insert image description here

Figure 2

Write the background layer and the content separately, and do not wrap the content in the background layer. This way, clicking on the content area will not close the mask layer!

This is the end of this article about how to use CSS to achieve a closable pop-up window with a mask layer. For more relevant CSS mask layer pop-up window content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Summary of uncommon js operation operators

>>: How to modify Flash SWF files in web pages