Beispiel für die Erstellung einer modalen Box mit HTML5 und CSS3

In diesem Artikel wird ein Beispiel für die Verwendung von HTML5 und CSS3 zum Erstellen einer modalen Box vorgestellt und für alle freigegeben. Die Details lauten wie folgt:

Vielleicht möchten Sie nicht die vielen ausführlichen Anweisungen unten lesen und sich stattdessen direkt den Quellcode oder ein Online-Beispiel ansehen. Der Link unten ist eine funktionale modale Box, die ich mit CSS3-Übergang, Deckkraft, Zeigerereignis und anderen Attributen erstellt habe.

Sie können darauf klicken, um zu Github zu gelangen und den Quellcode anzuzeigen: ModalBox-Tutorial

Front-End-Komponenten werden durch Geschäfts- und Interaktionsszenarien gesteuert, und Modalboxen bilden da keine Ausnahme. Ein häufiges Szenario besteht darin, einen Vorgang auszuführen, beispielsweise das Klicken auf eine Schaltfläche, und dann eine Modalbox anzuzeigen, um dem Benutzer Feedback zu geben oder den Benutzer anzuleiten um eine Interface-Down-Interaktion durchzuführen. Die Interaktion einer Modalbox kann 5 Schritte umfassen:

1. Es gibt eine Schaltfläche oder einen Link, auf den der Benutzer klickt, um die Anzeige der modalen Box auszulösen.

2. Wenn das modale Feld angezeigt wird, wird eine transparente Maskenebene angezeigt, die das gesamte aktuelle Ansichtsfenster blockiert.

3. Der Inhalt des modalen Felds wird an einer bestimmten Position (normalerweise in der Mitte) des Ansichtsfensters in einer nicht transparenten Farbe (normalerweise weiß) angezeigt.

4. Der Inhalt des Modalfelds (normalerweise in der oberen rechten Ecke) weist ein Schließzeichen auf. Wenn Sie darauf klicken, wird das Modalfeld ausgeblendet.

5. Der Inhalt der Modalbox sollte auf der Grundlage des tatsächlichen Geschäftsszenarios angegeben werden, sodass sie eine beliebige Struktur haben kann.

Stil

1. .modalbox ist zunächst ausgeblendet;

1. .modalbox ist eine transparente Maskenebene;

2. .modalbox-dialog ist eine nicht transparente Inhaltsebene;

3. Nachdem Sie auf den Link „Modalbox anzeigen“ geklickt haben, wird .modalbox angezeigt.

4. Nachdem Sie auf .modalbox-close-btn geklickt haben, wird .modalbox ausgeblendet.

Wirkungsbeispiel

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.