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

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

So aktualisieren Sie v-for in Vue

Detaillierte Erklärung der Semiotik in Html/CSS

So implementieren Sie CSS, um Auslassungspunkte anzuzeigen, wenn einzeiliger oder mehrzeiliger Text überläuft

Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren

jQuery manipuliert Cookies

Block- und Zeilenelemente, Sonderzeichen und Verschachtelungsregeln in HTML

So verbinden Sie SpringBoot mit MySQL, um Daten abzurufen und in die Backend-Schnittstelle zu schreiben

Was macht die MySQL-Datenbank?

favico.ico --- Schritte zum Einrichten des Website-ICO-Symbols

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

Artikel empfehlen

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

Docker-Compose-Installationsmethode für die YML-Dateikonfiguration

Neue Features in MySQL 8: Unsichtbare Indizes

CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

Verwendung der MySQL SHOW STATUS-Anweisung

Verwenden Sie thead, tfoot und tbody, um eine Tabelle zu erstellen

Über Generika der C++ TpeScript-Reihe

So installieren Sie MySQL über Yum auf CentOS7

Detaillierte Erläuterung der Nginx-Standortkonfiguration (Standortübereinstimmungsreihenfolge)

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

Tipps zum Anzeigen von Text in Linux (super praktisch!)

Beispielcode zur Implementierung eines Laufschriftformats mit CSS3

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

Lösen Sie das Problem, dass MySQL 8.0 trotz korrekter Eingabe immer noch die Meldung „Zugriff verweigert“ anzeigt.

Führen Sie die Schritte aus, um den Fehler 403 Forbidden in Nginx zu beheben.