: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 wählt ein Element aus, 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 von der :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 {
  /* ... */
}

Verwendungshinweise

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

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

Beispiele

Stil eines modalen Dialogs

Dieses Beispiel stylt einen modalen Dialog, der geöffnet wird, wenn die Schaltfläche "Details aktualisieren" aktiviert wird. Dieses Beispiel basiert auf dem <dialog> Element Beispiel.

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