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

vue+el-upload realisiert den dynamischen Upload mehrerer Dateien

vue+el-upload Dynamischer Upload mehrerer Dateien...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

So lösen Sie das jQuery-Konfliktproblem

In der Frontend-Entwicklung ist $ eine Funktion i...

Eine kurze Diskussion über die Rolle leerer HTML-Links

Leerer Link: Das heißt, es besteht keine Verbindu...

Gojs implementiert Ameisenlinien-Animationseffekt

Inhaltsverzeichnis 1. Gojs-Implementierung 1. Zei...

HTML-Lernhinweise – Detaillierte Erklärung der HTML-Syntax (unbedingt lesen)

1. Was ist die HTML-Auszeichnungssprache? HTML is...

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

Inhaltsverzeichnis So starten Sie mysqld Methode ...

Implementierung der Validierung mehrerer Elemente im Formular

Im Projekt werden häufig Formulartests durchgefüh...

Fallstricke und Lösungen für das Upgrade von MySQL 5.7.23 in CentOS 7

Vorwort Kürzlich bin ich beim Upgrade von MySQL 5...

Die MySQL-Funktionen DATE_ADD und ADDDATE fügen einem Datum ein angegebenes Zeitintervall hinzu

Die MySQL-Funktionen DATE_ADD(date,INTERVAL expr ...

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

URL: http://hostname.com/contextPath/servletPath/...

Fallbeispiel zur TypeScript-Schnittstellendefinition

Die Rolle der Schnittstelle: Schnittstelle, auf E...

Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

Wirkung: Ideen: Verwenden Sie das Eingabetypattri...

MySQL-Sortierprinzipien und Fallanalyse

Vorwort Das Sortieren ist eine grundlegende Funkt...

Detaillierte Erklärung des HTML-Tags <input> und wie man es deaktiviert

Definition und Verwendung Das <input>-Tag w...