Softonic

CSS-Modal-Generator

Schritt 1 / 2
Ergebnisse

Ein modales Dialogfenster ist eine Vollbild-Hintergrundfläche mit einem Panel darüber: Die Hintergrundfläche dimmt die Seite und blockiert deren Bedienung, das Panel enthält Titel, Inhalt und Aktionsschaltflächen. Dieser Generator schreibt das CSS für diese Struktur mit fünf Klassen: .modal-backdrop, .modal-panel, .modal-header, .modal-body und .modal-actions. Sie legen Breite, Eckenradius und Akzentfarbe des Panels fest und kopieren den Code in Ihr Projekt.

So erzeugen Sie einen Modal-Stil

  1. 1

    Panel-Breite festlegen

    Geben Sie die gewünschte Breite in Pixeln ein. Das Panel nutzt `min(100%, Npx)`, passt sich also auf kleinen Bildschirmen an.

  2. 2

    Eckenradius wählen

    Bestimmen Sie die Rundung der Paneelecken, von einer scharfen Kante bis zu einer vollständig gerundeten Karte.

  3. 3

    Akzentfarbe wählen

    Wählen Sie die Farbe der 4 px dicken Akzentleiste am oberen Rand des Kopfbereichs.

  4. 4

    CSS kopieren

    Kopieren Sie den Code und verwenden Sie die Klassennamen in Ihrem Markup: backdrop, panel, header, body und actions.

Was der erzeugte CSS-Code abdeckt

Der Code formatiert fünf Klassen:

  • .modal-backdrop: feste Vollbild-Ebene mit dunklem, halbtransparentem Hintergrund (rgba(17, 24, 39, .62)), zentriertem Grid und 24 px Abstand rund um das Panel.
  • .modal-panel: weiße Karte mit einer Breite von min(100%, Npx), Ihrem Eckenradius, weichem Schatten und abgeschnittenen Ecken.
  • .modal-header: 4 px dicke Akzentleiste in Ihrer Farbe, darunter der Überschriftsbereich mit 20 px 24 px Innenabstand.
  • .modal-body: der Inhaltsbereich mit 18 px 24 px Innenabstand.
  • .modal-actions: eine rechtsbündige Reihe von Schaltflächen mit 10 px Abstand.

Passende HTML-Struktur

Der Code erwartet dieses Markup:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Bestätigen</h2>
    </div>
    <div class="modal-body">
      <p>Möchten Sie wirklich fortfahren?</p>
    </div>
    <div class="modal-actions">
      <button>Abbrechen</button>
      <button>Fortfahren</button>
    </div>
  </div>
</div>

Das Panel muss innerhalb der Hintergrundfläche liegen: Die Hintergrundfläche ist die feste Ebene, das Panel wird darin zentriert. Zum Öffnen und Schließen des Modals binden Sie die Hintergrundfläche aus Ihrem Anwendungscode ein oder aus, oder schalten Sie ihre Anzeige um.

Anpassung an kleine Bildschirme

Die Panelbreite wird mit min(100%, Npx) begrenzt. Eine Einstellung von 520 px wird auf einem schmalen Smartphone daher zur vollen Viewport-Breite abzüglich der 24 px Innenabstands der Hintergrundfläche. Die Aktionszeile bleibt rechtsbündig, und lange Inhalte scrollen mit der Seite. Für die üblichen Fälle sind keine Media Queries nötig.

Hinweise und Grenzen

Der Generator erzeugt ausschließlich CSS. Er enthält kein JavaScript zum Öffnen oder Schließen des Modals, zum Einfangen des Tastaturfokus oder zur Verarbeitung der ESC-Taste. Diese Logik ergänzen Sie in Ihrer Anwendung.

Der Kopfbereich behält seine 4 px dicke Akzentleiste immer bei; falls Sie sie nicht benötigen, entfernen oder ändern Sie die Regel im kopierten Code.

Häufig gestellte Fragen

Eine feste dunkle Hintergrundfläche, ein zentriertes weißes Panel mit Ihrer Breite und Ihrem Eckenradius, einen Kopfbereich mit Akzentleiste, einen Inhaltsbereich und eine rechtsbündige Aktionszeile. Fünf Klassen, die Sie direkt in Ihr Stylesheet einfügen können.

Nur CSS. Der Code definiert fünf Klassen; Sie verwenden sie in Ihrem eigenen Markup und steuern Öffnen und Schließen mit Ihrem eigenen Skript.

Die Panelbreite wird mit min(100%, Npx) begrenzt. Auf einem schmalen Smartphone füllt das Panel daher die verfügbare Breite abzüglich 24 px Innenabstands der Hintergrundfläche. Die Aktionszeile bleibt rechtsbündig.

Der Generator liefert kein JavaScript. Blenden Sie die Hintergrundfläche aus Ihrer Anwendung ein und aus, zum Beispiel mit einem kleinen Skript, das sie bei einem Klick auf eine Schaltfläche anzeigt und danach wieder ausblendet.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.

Tool in anderen Sprachen verfügbar