:modal

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die :modal CSS Pseudoklasse stimmt mit einem Element überein, das sich in einem Zustand befindet, in dem es jegliche Interaktion mit Elementen außerhalb von ihm ausschließt, bis die Interaktion beendet wurde. Mehrere Elemente können gleichzeitig durch die :modal Pseudoklasse ausgewählt werden, aber nur eines von ihnen wird aktiv sein und Eingaben empfangen können.

Probieren Sie es aus

Syntax

css
:modal {
  /* ... */
}

Nutzungshinweise

Beispiele für Elemente, die die Benutzerinteraktion mit dem Rest der Seite verhindern und durch die :modal Pseudoklasse ausgewählt werden, sind:

  • Das dialog Element, das mit der showModal() API geöffnet wird.
  • Das Element, das durch die :fullscreen Pseudoklasse ausgewählt wird, wenn es mit der requestFullscreen() API geöffnet wird.

Beispiele

Styling eines modalen Dialogs

Dieses Beispiel gestaltet einen modalen Dialog, der geöffnet wird, wenn die Schaltfläche "Details aktualisieren" aktiviert wird. Dieses Beispiel wurde auf Basis des <dialog> Element Beispiels erstellt.

CSS

css
:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# modal-state

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch