CSS Modal Popup Beispiel
Verwenden Sie Pure CSS, um modale Popup-Windows zu implementieren, um sichtbare und versteckte Kontrollkästchen zu steuern. 1. Verwenden Sie die Eingabe [type = "CheckBox"] als Statusschalter; 2. Verwendung: MODAL überprüft, um die Anzeige von Modalkästchen zu steuern. 3. Verwenden Sie die Etikett [für], um die Überprüfung auszulösen, um ein und aus zu erreichen. 4. Fügen Sie @KeyFrames Animation hinzu, um einen Fade-in-Popup-Effekt zu erzielen. 5. Die Schaltfläche oder die Maskenklickbereich in der Modal -Box kann gebunden werden, um die Steuerung zu kennzeichnen. Der gesamte Prozess erfordert kein JavaScript, ist sehr kompatibel und zugänglich und für statische Seiten oder leichte interaktive Szenarien geeignet.
Ein reines CSS-implementiertes modales Popup-Fenster (modales Popup) kann das sichtbare und versteckte :target
-Klasse oder checkbox
label
ohne JavaScript versteckt. Im Folgenden finden Sie ein einfaches, praktisches und wiederverwendbares CSS -Modal -Box, bei dem versteckte Kontrollkästchen verwendet werden, um die Anzeige zu steuern und für ein stabileres Erlebnis zu schließen.

✅ Beispiel für ein pures CSS -Modal -Popup -Beispiel
<! DocType html> <html lang = "zh"> <kopf> <meta charset = "utf-8" /> <title> CSS Modal Popup Beispiel </title> <Styles> /* Basic Reset*/// * {{ Rand: 0; Polsterung: 0; Kastengrößen: Border-Box; } Körper { Schriftfamilie: Arial, Sans-Serif; Hintergrundfarbe: #F4F4F4; Polsterung: 20px; } /* Button -Stil*/// .BTN-Open { Polsterung: 10px 18px; Hintergrundfarbe: #007BFF; Farbe: weiß; Grenze: Keine; Border-Radius: 4px; Cursor: Zeiger; Schriftgröße: 16px; } /* Modale Hintergrundmaske*// .modal { Anzeige: Keine; Position: fest; Top: 0; links: 0; Breite: 100%; Höhe: 100%; Hintergrundfarbe: RGBA (0, 0, 0, 0,5); Justify-Content: Center; Ausrichtung: Zentrum; Z-Index: 1000; } /* Kontrollkästchen -Kontrollkästchen angezeigt und versteckt*/ #Modal Toggle { Anzeige: Keine; } #Modal Toggle: Checked .modal { Anzeige: Flex; } /* Modal Content Box*// .Modal-Inhalt { Hintergrund: weiß; Breite: 90%; Max-Breite: 500px; Polsterung: 20px; Border-Radius: 8px; Box-Shadow: 0 4px 15px RGBA (0, 0, 0, 0,2); Position: Relativ; Animation: Fadein 0.3s Easy-Out; } /* Schaltfläche schließen*/ .modal-close { Position: absolut; Top: 10px; Rechts: 15px; Schriftgröße: 24px; Farbe: #aaa; Textdekoration: Keine; Linienhöhe: 1; Cursor: Zeiger; } .modal-close: hover { Farbe: #000; } /* Animationseffekt*// @keyframes fadein { aus { Deckkraft: 0; Transformation: Skala (0,9); } Zu { Deckkraft: 1; Transformation: Skala (1); } } </style> </head> <body> <!-Trigger-Taste-> <Label für = "Modal-Toggle" class = "btn-open"> Öffnen Sie das Modal-Box </label> <!-verstecktes Kontrollkästchen-> <Eingabe type = "checkbox" id = "modal toggle" /> <!-Modal Box-> <div class = "modal"> <div class = "modal content"> <a href = "#" class = "modal-close" onclick = "document.getElementById ('modal-toggle'). Checked = false;"> × </a> <h2> Modal Box -Titel </h2> <p> Dies ist der Inhalt der Modalbox. Sie können Formulare, Bilder oder andere Inhalte hinzufügen. </p> <Label für = "Modal-Toggle" Style = "Margin-Top: 10px; Anzeige: Inline-Block; Padding: 8px 12px; Hintergrund: #6c757d; Farbe: Weiß; Border-Radius: 4px; Cursor: Zeiger;"> Close </label> </div> </div> </body> </html>
? Schlüsselpunkte Beschreibung
- Kein JavaScript-sichtbarer und implizite Steuerelement : Verwenden Sie
<input type="checkbox" id="modal-toggle">
und:checked .modal
. - Klicken Sie auf den äußeren Bereich der Maske, um sie zu schließen : Sie können
.modal
eine Pseudoelement hinzufügen oder das Etikett-Klick anhören. In diesem Fall ist es jedoch sicherer, mit dem Link oder der Schaltfläche "Schließen" oder "Schließen" zu schließen. - Support-Animation : Verwenden Sie
@keyframes
, um einen Popup-Effekt zu erzielen. - Barrierefreiheit :
label[for]
verbessert die Benutzerfreundlichkeit und die klare Semantik.
✅ Optionale Verbesserungen
- Klicken Sie auf die Maskenebene, um sie zu schließen: Sie können
.modal
einlabel
hinzufügen, um die Hintergrundschichtfor="modal-toggle"
abzudecken. - Die Verwendung
:target
Ziel ist einfacher, aber die URL ändert sich (z. B.#modal
) und ist nicht für alle Szenarien geeignet.
? Tipps
- Wenn Sie eine modernere Art und Weise wünschen, können Sie
prefers-reduced-motion
kombinieren, um das Unbehagen von Animationen gegenüber sensiblen Benutzern zu vermeiden. - Denken Sie daran,
overflow-y: auto
hinzuzufügen, um den Überlauf von Inhalten zu verhindern.
Grundsätzlich alles, was nicht kompliziert, aber praktisch genug ist. Sie können diesen Code in eine HTML -Datei kopieren und den Test direkt ausführen.
Das obige ist der detaillierte Inhalt vonCSS Modal Popup Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Die Kernmethode zum Aufbau sozialer Freigabefunktionen in PHP besteht darin, dynamisch Freigabelinks zu generieren, die den Anforderungen jeder Plattform entsprechen. 1. Erhalten Sie zuerst die aktuelle Seite oder die angegebenen URL- und Artikelinformationen. 2. Verwenden Sie Urlencode, um die Parameter zu codieren. 3.. Spleiß und generieren Teilenverbindungen gemäß den Protokollen jeder Plattform; 4. Zeigen Sie Links im vorderen Ende an, damit Benutzer klicken und freigeben können. 5. generieren Sie Dynamik OG -Tags auf der Seite, um die Anzeige der Freigabe inhaltlich zu optimieren. 6. Achten Sie darauf, dass Sie den Benutzereingaben entkommen, um XSS -Angriffe zu verhindern. Diese Methode erfordert keine komplexe Authentifizierung, weist nur geringe Wartungskosten auf und eignet sich für die meisten Anforderungen an den Inhaltsaustausch.

1. Maximierung des kommerziellen Wertes des Kommentarsystems erfordert die Kombination der präzisen Lieferung native Werbung, benutzerbezahlte Wertschöpfungsdienste (z. B. Bilder hochladen, Aufladungskommentare), den Incentive-Mechanismus basierend auf der Qualität der Kommentare und der Anonymen Daten Insight-Monetarisierung von Compliance; 2. Die Prüfungsstrategie sollte eine Kombination aus dynamischer Keyword-Filterung und Benutzerkennungsmechanismen vorab der Auditing einsetzen, die durch die Qualität der Kommentarqualität ergänzt werden, um die hierarchische Inhaltsbelastung zu erreichen. 3. Die Anti-Pushing erfordert die Konstruktion einer mehrschichtigen Verteidigung: Recaptchav3 sensorlose Überprüfung, Honeypot-Honeypot-Feldkennungroboter, IP und Zeitstempelfrequenzgrenze verhindert die Bewässerung, und die Erkennung von Inhalten markiert verdächtige Kommentare und ständig mit Angriffen.

1. Die erste Wahl für die Kombination aus Laravel Mysql Vue/React in der PHP -Entwicklungsfrage und der Antwortgemeinschaft ist die erste Wahl für die Kombination aus Laravel Mysql Vue/React aufgrund ihrer Reife im Ökosystem und der hohen Entwicklungseffizienz; 2. Die hohe Leistung erfordert Abhängigkeit von Cache (REDIS), Datenbankoptimierung, CDN und asynchronen Warteschlangen; 3. Die Sicherheit muss mit Eingabefilterung, CSRF -Schutz, HTTPS, Kennwortverschlüsselung und Berechtigungssteuerung erfolgen. V.

Will-Change ist eine CSS-Eigenschaft, mit der Browserelemente vor möglichen Änderungen zur Optimierung der Leistung informiert werden. Seine Kernfunktion besteht darin, den Browser zu ermöglichen, Schichten im Voraus zu erstellen, um die Renderungseffizienz zu verbessern. Zu den gemeinsamen Werten gehören Transformation, Opazität usw. und können auch durch mehrere Attributkommando getrennt werden. Es eignet sich für nicht standardmäßige Attributanimationen, komplexe Komponentenübergänge und Benutzerinteraktion ausgelöste Animationen. Aber es muss vermieden werden, wenn es zu einem übermäßigen Speicherverbrauch oder einer erhöhten GPU -Belastung führt. Die beste Praxis besteht darin, sich zu bewerben, bevor die Änderung stattfindet, und sie nach Abschluss der Fertigstellung zu entfernen.

In diesem Artikel wurde eine Reihe von Fertigproduktressourcen-Websites der Top-Ebene für VUE-Entwickler und -Lernende ausgewählt. Über diese Plattformen können Sie massive qualitativ hochwertige Vue-Projekte kostenlos online stöbern, lernen und sogar wiederverwenden, wodurch Ihre Entwicklungsfähigkeiten und Projektpraxisfunktionen schnell verbessert werden.

Verschiedene Browser weisen Unterschiede in der CSS -Analyse auf, was zu inkonsistenten Anzeigeeffekten führt, hauptsächlich die Differenzentscheidung, die Berechnung des Boxmodells, die Flexbox- und Raster -Layout -Unterstützung und das inkonsistente Verhalten bestimmter CSS -Attribute. 1. Die Standardstilverarbeitung ist inkonsistent. Die Lösung besteht darin, CSSReset oder Normalize.css zu verwenden, um den anfänglichen Stil zu vereinen. 2. Die Box -Modellberechnung der alten Version von IE ist unterschiedlich. Es wird empfohlen, eine einheitliche Boxgröße: Border-Box zu verwenden. 3. Flexbox und Grid führen in Kantenfällen oder in alten Versionen unterschiedlich ab. Weitere Tests und verwenden Sie Autoprefixer; 4. Einige CSS -Attributverhalten sind inkonsistent. Caniuse muss konsultiert und herabgestuft werden.

Der CSS -Regelsatz besteht aus Selektoren und Deklarationsblöcken, um den Stil von HTML -Elementen zu definieren. 1. Der Selektor gibt das Zielelement an, wie z. B. ein Tag, eine Klasse oder eine ID; 2. Deklarieren Sie den Block so, dass es Attribute und Werte enthält, um das Erscheinungsbild des Elements zu steuern. Zum Beispiel: p {color: blau; Schriftgröße: 16px;} bedeutet die Auswahl des Absatzes und die Festlegung der Textfarbe und der Schriftgröße. Beherrschen Sie diese beiden Teile, um effektive CSS -Stile zu schreiben.

Die Kernrolle von Homebrew bei der Konstruktion der Mac -Umgebung besteht darin, die Installation und Verwaltung der Software zu vereinfachen. 1. Homebrew verarbeitet automatisch Abhängigkeiten und verkapselt komplexe Kompilierungs- und Installationsprozesse in einfache Befehle. 2. Bietet ein einheitliches Softwarepaket -Ökosystem, um die Standardisierung des Software -Installationsorts und der Konfiguration zu gewährleisten. 3. Integriert Service -Management -Funktionen und kann Dienste leicht über Brewservices starten und stoppen. 4. Bequemes Software -Upgrade und -wartung und verbessert die Sicherheit und Funktionalität der Systeme.
