Wie erstelle ich ein animiertes Modalfenster mit CSS?

Verwenden Sie versteckte Kontrollkästchen und: Überprüfung der Pseudoklasse, um den Status des modalen Kontrollkästchens zu steuern. 2. Klicken Sie hier, um die Label Association zu öffnen und zu schließen. 3. Verwenden Sie CSS-Übergang oder @KeyFrames, um eine Fade-In-Zoomanimation zu erreichen. 4. Setzen Sie Zeiger-Events, um sicherzustellen, dass das Klicken auf die Maske geschlossen werden kann. 5. ESC -Schlüssel kann in reinem CSS nicht geschlossen werden. Diese Methode erfordert kein JavaScript, ist leicht und kompatibel mit modernen Browsern und für einfache Projekte oder Lernzwecke geeignet.

Das Erstellen eines CSS-animierten Modalfensters ist mit nur HTML und CSS vollständig machbar-kein JavaScript erforderlich. Der Trick besteht darin, den :target oder Kontrollkästchen mit :checked auf die Sichtbarkeit zu verwenden, kombiniert mit CSS -Übergängen oder Animationen auf reibungslose Effekte.

Hier erfahren Sie, wie Sie einen Schritt für Schritt einen Schritt erstellen:

✅ :target .

Da wir JavaScript nicht verwenden können, brauchen wir einen Weg, uns an den Status des Modals zu erinnern. Zwei gemeinsame Methoden:

• :target - Verwendet URL -Fragment -Identifikatoren (z. B. #modal )
• Kontrollkästchen Hack - verbirgt ein Kontrollkästchen und stilft seinen :checked Status

Wir werden die Checkbox-Methode verwenden, da sie ein reibungsloseres Verhalten und eine bessere Kontrolle ermöglicht.

HTML -Struktur:

 <!-verstecktes Kontrollkästchen zur Steuerung des modalen Status->
<input type = "checkbox" id = "modal toggle" class = "modal toggle">
<label für = "modal-toggle" class = "modal-open-btn"> modal </label> öffnen

<!-Modal->
<div class = "modal">
  <Label für = "Modal-Toggle" class = "modal-overlay"> </label>
  <div class = "modal content">
    <Label für = "Modal-Toggle" class = "modal-close"> & times; </label>
    <h2> Modal -Titel </h2>
    <p> Dies ist Ihr animierter modaler Inhalt. </p>
  </div>
</div>

Das Kontrollkästchen fungiert als Umschalter. Klicken Sie auf das Etikett ( modal-open-btn ) oder schließen Elemente das Kontrollkästchen, das wir bedingt stylen.

✅ 2. styal das Modal mit CSS -Animation

Wenden Sie nun Stile an, um es animiert und visuell ansprechend zu machen.

Kern -CSS:

 / * Verstecken das Kontrollkästchen */
.Modal-Toggle {
  Anzeige: Keine;
}

/ * Modale Basis: standardmäßig versteckt */
.modal {
  Deckkraft: 0;
  Sichtbarkeit: versteckt;
  Position: fest;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Zeiger-Events: Keine;
  Übergang: Deckkraft von 0,3s Leichtigkeit;
}

/ * Modal Overlay (Hintergrund dim) */
.modal-overlay {
  Position: absolut;
  Top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Hintergrundfarbe: RGBA (0, 0, 0, 0,5);
}

/ * Modal Content Box *//
.Modal-Inhalt {
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%) Skala (0,8);
  Breite: 90%;
  Max-Breite: 500px;
  Hintergrund: weiß;
  Polsterung: 30px;
  Border-Radius: 10px;
  Box-Shadow: 0 4px 20px RGBA (0,0,0,0,2);
  Übergang: 0,3S -Leichtigkeit;
}

/ * Schaltfläche schließen */
.modal-close {
  Position: absolut;
  Top: 10px;
  Rechts: 15px;
  Schriftgröße: 28px;
  Cursor: Zeiger;
  Farbe: #aaa;
}

.modal-close: hover {
  Farbe: #000;
}

/ * Modal anzeigen, wenn das Kontrollkästchen aktiviert ist */
.Modal-Toggle: Checked .modal {
  Deckkraft: 1;
  Sichtbarkeit: sichtbar;
  Zeiger-Events: Auto;
}

.Modal-Toggle: überprüft .modal .modal-content {
  Transformation: Translate (-50%, -50%) Skala (1);
}

Die pointer-events: none auf dem Modal- und pointer-events: auto wenn aktiv sicherstellt, dass das Overlay das Modal schließen (über das Etikett).

✅ 3.. Fügen Sie Eingangs- und Ausgangsanimationen hinzu

Willst du mehr Flair? Ersetzen Sie transition durch eine vollständige @keyframes -Animation.

Beispiel: Fade & scale Animation

 @keyframes modal-in {
  0% {
    Deckkraft: 0;
    Transformation: Translate (-50%, -50%) Skala (0,7);
  }
  100% {
    Deckkraft: 1;
    Transformation: Translate (-50%, -50%) Skala (1);
  }
}

@keyframes modal-out {
  0% {
    Deckkraft: 1;
    Transformation: Translate (-50%, -50%) Skala (1);
  }
  100% {
    Deckkraft: 0;
    Transformation: Translate (-50%, -50%) Skala (0,8);
  }
}

/ * Animation nur beim Öffnen anwenden */
.Modal-Toggle: überprüft .modal .modal-content {
  Animation: Modal-in 0,3s vorwärts;
}

/ * Optional: Animate Out - Tricky ohne JS, funktioniert aber bei der Nähe, wenn Sie sich umkehren */
.Modal-Inhalt {
  Animation: Keine;
}

HINWEIS: Da CSS die Animationen nicht einfach im Uneingeschränkten umkehren können, ist die Verwendung transition oft reibungsloser als der Versuch, das Schließen zu animieren.

✅ 4. Optional: Schließen Sie Overlay oder ESC (teilweise)

• Overlay-Klick : bereits über <label for="modal-toggle" class="modal-overlay"></label> gehandhabt.
• ESC -Schlüssel : Kann nicht in reinem CSS behandelt werden. Sie würden JS für die Tastaturunterstützung benötigen.

✅ Zusammenfassung: Schlüsselpunkte

• Verwenden Sie ein verstecktes Kontrollkästchen und :checked , um den Status zu simulieren.
• Verwenden Sie label , um offen/schließen zu lösen.
• Animate mit transition oder @keyframes .
• Verwenden Sie pointer-events , um das Klickverhalten im Hintergrund zu steuern.
• Keine Tastaturunterstützung (ESC) ohne JavaScript.

Diese Methode ist leicht, für die grundlegende Verwendung zugänglich und funktioniert in modernen Browsern. Es ist perfekt für einfache Projekte oder das Erlernen von CSS -Logik.

Grundsätzlich verbinden Sie das Kontrollkästchen einfach mit Beschriftungen und beleben Sie das Erscheinungsbild. Nicht Magie - nur clevere CSS.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein animiertes Modalfenster mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!