CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Popup-Fenster werden in der tatsächlichen Entwicklung häufig verwendet. Als ich CSS3 lernte, stellte ich fest, dass ich mit reinem CSS ein Popup-Fenster mit einer Maskenebene implementieren konnte, die geschlossen werden kann.

Um mit CSS3 ein Popup-Fenster mit einer schließbaren Maskenebene zu implementieren, müssen Sie die Pseudoklasse :target und die Pseudoelemente ::before und ::after verwenden.

Code zur Implementierung des Popup-Fensters:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        /*Popup-Fenster schließen*/
        .popBox {
            Anzeige: keine;
        }

        /*Popup-Fenster öffnen*/
        .popBox:Ziel {
            Elemente ausrichten: zentrieren;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Position: absolut;
            links: 0;
            rechts: 0;
            oben: 0;
            unten: 0;
        }

        /*Popup-Inhalt festlegen*/
        .popBox .con {
            Hintergrundfarbe: rgba(250, 188, 199, 0,76);
            Rahmenradius: 5px;
            Polsterung: 1,5rem;
            Position: relativ;
            Breite: 25rem;
        }

        /*Schaltfläche „Schließen“*/
        .popBox .schließen {
            Anzeige: Block;
            Position: relativ;
        }

        .popBox .close::nach {
            Elemente ausrichten: zentrieren;
            Farbe: weiß;
            Inhalt: "×";
            Cursor: Zeiger;
            Hintergrundfarbe: rgba(79, 79, 79, 0,9);
            Randradius: 50 %;
            Anzeige: Flex;
            Schriftgröße: 1,25rem;
            Inhalt ausrichten: zentriert;
            Position: absolut;
            rechts: -2,5rem;
            oben: -2,5rem;
            Höhe: 2rem;
            Breite: 2rem;
            Z-Index: 2;
        }

        /*Popup-Fenstermaske*/
        .popBox::vor {
            Inhalt: "";
            Cursor: Standard;
            Hintergrundfarbe: rgba(173, 173, 173, 0,66);
            Position: fest;
            links: 0;
            rechts: 0;
            oben: 0;
            unten: 0;
        }
    </Stil>
</Kopf>
<Text>
<ul>
    <li><a href="#example1">Fall 1</a></li>
    <li><a href="#example2">Fall 2</a></li>
</ul>

<Artikelklasse="popBox" id="beispiel1">
    <div Klasse="con">
        <a href="#" class="schließen"></a>
        <p>Ein Fall ist eine typische Darstellung von Ereignissen mit mehreren Bedeutungen, die Menschen in ihrem Schaffen und Leben erfahren. Es handelt sich um einen absichtlichen Auszug aus den Geschichten, die Menschen erleben. Ein Fall besteht im Allgemeinen aus drei Hauptelementen. Fälle sind für das Lernen, die Forschung und den Lebensbezug der Menschen von großer Bedeutung. Fallbasierter Unterricht ist ein wirksames Mittel, um Menschen anhand von Fällen gezielt pädagogische Erkenntnisse zu vermitteln. </p>
    </div>
</Artikel>

<Artikelklasse="popBox" id="beispiel2">
    <div Klasse="con">
        <a href="#" class="schließen"></a>
        <p>Ein Fall ist eine typische mehrdeutige Ereignisaussage, die Menschen in Produktion und Leben erleben. Es handelt sich um eine bewusste Unterbrechung der Geschichten, die Menschen erleben. Fälle umfassen im Allgemeinen drei Hauptelemente. Fälle sind für das Lernen, die Forschung und den Lebensbezug der Menschen von großer Bedeutung. Fallbasiertes Lehren ist ein wirksames Mittel, um Menschen durch Fälle gezielt pädagogische Bedeutung zu vermitteln.</p>
    </div>
</Artikel>
</body>
</html>

Der Effekt ist im folgenden Bild dargestellt

Bildbeschreibung hier einfügen

Zusätzliche Wissenspunkte:

Klicken Sie auf den Hintergrund der Maskenebene, um die Maskenebene zu schließen

Beim Nachahmen der offiziellen Website von Huawei habe ich festgestellt, dass es auf der offiziellen Website von Huawei eine Maskenebene gibt. Sie können die Maskenebene schließen, indem Sie auf den Hintergrund der Maskenebene klicken. Die Maskenebene wird jedoch nicht geschlossen, wenn Sie auf den Inhaltsbereich klicken. Also begann ich, diese Fallstudie nachzuahmen, und sogar der Inhalt war genau der gleiche (weil der Zweck dieser Übung darin bestand, den gleichen Effekt wie den von Huawei oder einen besseren Effekt zu beschreiben). Am Anfang schrieb ich es so (Abbildung 1)

Bildbeschreibung hier einfügen

Abbildung 1

Ich habe class=Select_Region_bj einen grauen, durchscheinenden Hintergrundstil gegeben und später das Onclick-Ereignis in Javascript geschrieben. Egal, wie ich es geschrieben habe, beim Klicken auf den Inhaltsbereich wurde die Maskenebene geschlossen. Ich konnte nicht herausfinden, wie ich es so schreiben sollte, dass der Inhaltsbereich beim Klicken nicht geschlossen wird. Später, während der Pause, sah ich, dass mein Klassenkamerad ein Programm geschrieben hatte, mit dem man auf den Inhaltsbereich klicken konnte, ohne die Maskenebene zu schließen. Ich fragte ihn, wie er es geschrieben hatte, und er sagte: „Trennen Sie sie einfach.“ Ich dachte eine Weile darüber nach und dachte: Trennen? Wie trennen? Durch weiteres Patchen gelang es mir schließlich, die Hintergrund- und Inhaltsbereiche zu trennen. Separates Schreiben (Abbildung 2)

Bildbeschreibung hier einfügen

Abbildung 2

Schreiben Sie die Hintergrundebene und den Inhalt getrennt und packen Sie den Inhalt nicht in die Hintergrundebene ein. Auf diese Weise wird die Maskenebene nicht geschlossen, wenn Sie auf den Inhaltsbereich klicken!

Dies ist das Ende dieses Artikels darüber, wie man mit CSS ein schließbares Popup-Fenster mit einer Maskenebene erstellt. Weitere relevante Inhalte zu Popup-Fenstern mit CSS-Maskenebene finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Zusammenfassung ungewöhnlicher JS-Operationsoperatoren

>>: So ändern Sie Flash-SWF-Dateien in Webseiten

CentOS-Methode zum Ändern der Standard-SSH-Portnummer – Beispiel

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

CentOS-Methode zum Ändern der Standard-SSH-Portnummer – Beispiel

So kompilieren Sie Nginx neu und fügen Module hinzu

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Lösung für mobile Browser, die die Position nicht unterstützen: Fix

Verwenden Sie html-webpack-plugin‘, um ein HTML-Seiten-Plugin im Speicher zu generieren

Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv

Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL

MySQL erklärt das Prinzip und Beispiel zum Abrufen von Abfrageanweisungen

Eine vorläufige Studie zu JSBridge in Javascript

MySQL stellt Daten über Binlog wieder her

Artikel empfehlen

jQuery Canvas generiert ein Poster mit einem QR-Code

Vue implementiert Fuzzy-Abfrage-MySQL-Datenbankdaten

So behandeln Sie einen Überlauf numerischer MySQL-Typen

MySQL verwendet die Funktion find_in_set(), um die Sortierung in der Reihenfolge where in() zu implementieren.

Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL

MySQL-Wissenspunkte und häufig verwendete MySQL-Befehle für die Computerprüfung der zweiten Ebene

Lösen Sie das Problem, dass der anonyme Upload und Download von Linux-FTP automatisch startet

Eine vollständige Erklärung der MySQL-Hochverfügbarkeitsarchitektur: MHA-Architektur

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

JavaScript implementiert Klicken zum Ändern der Bildform (Transformationsanwendung)

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial

So wechseln Sie zwischen Vue-Produktions- und Entwicklungsumgebungen und verwenden Filter

Umfassendes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Linux-Swap-Partition (ausführliche Erklärung)