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

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

Artikel empfehlen

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

Inhaltsverzeichnis 1.1Tinyint-Typbeschreibung 1.2...

Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)

Die wesentlichen Inhalte dieses Artikels sind wie...

Der Prozess der Installation von Docker im Linux-System

In diesem Blog führe ich Sie in einfachen Schritt...

Vue verwendet Echarts, um ein dreidimensionales Balkendiagramm zu implementieren

In diesem Artikel wird der spezifische Code von V...

Einführung in die Eigenschaften von B-Tree

B-Baum ist eine allgemeine Datenstruktur. Daneben...

Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts

1. Das in diesem Artikel implementierte Effektdia...

So stellen Sie eine Datenbank und eine Tabelle aus einer vollständigen MySQL-Datenbanksicherung wieder her

Wie kann ich im offiziellen MySQL-Dump-Tool nur e...

jQuery implementiert einen Zeitselektor

In diesem Artikelbeispiel wird der spezifische Co...

Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)

Inhaltsverzeichnis 1. Schreiben Sie vor 2. Overla...

DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)

DOCTYPE-DEKLARATION: Oben auf jeder Seite, die Sie...

Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil

Analysieren Sie den Ausführungsprozess. Bewegen S...

Upload-Komponentenfunktion basierend auf React-Dropzone entwickeln (Beispieldemonstration)

Dieses Mal werde ich über die Fähigkeiten zur Ent...

Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen

Inhaltsverzeichnis 1. Einleitung 2. Verwenden Sie...

Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns

8 Optimierungsmethoden für das MySQL-Datenbankdes...

Lösen Sie das Matching-Problem in CSS

Problembeschreibung Wie wir alle wissen, wird bei...