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

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

Recommend

The perfect solution to the Chinese garbled characters in mysql6.x under win7

1. Stop the MySQL service in the command line: ne...

Three ways to delete a table in MySQL (summary)

drop table Drop directly deletes table informatio...

The difference between mysql outer join and inner join query

The syntax for an outer join is as follows: SELEC...

Detailed explanation of mysql partition function and example analysis

First, what is database partitioning? I wrote an ...

Analysis of SQL integrity constraint statements in database

Integrity constraints Integrity constraints are f...

Detailed explanation of the function and usage of keepAlive component in Vue

Preface During the interview, many interviewers m...

Docker exposes port 2375, causing server attacks and solutions

I believe that students who have learned about th...

Detailed explanation of html download function

The new project has basically come to an end. It ...

MySQL gets the current date and time function

Get the current date + time (date + time) functio...

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

Implementation of breakpoint resume in vue-video-player

In a recent project, I needed to implement the fu...

JavaScript canvas to achieve scratch lottery example

This article shares the specific code of JavaScri...

Example of implementing bidirectional messaging between parent and child pages in HTML iframe

One day, the leader put forward a requirement to ...

React diff algorithm source code analysis

Table of contents Single Node Diff reconcileSingl...

How to draw a mind map in a mini program

Table of contents What is a mind map? How to draw...