:modal
Baseline 2022Newly 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 Pseudo-Klasse wählt ein Element aus, das sich in einem Zustand befindet, in dem es jegliche Interaktion mit Elementen außerhalb dieses Zustands ausschließt, bis die Interaktion beendet wird. Mehrere Elemente können gleichzeitig von der :modal
Pseudo-Klasse ausgewählt werden, jedoch wird nur eines davon aktiv sein und Eingaben empfangen können.
Probieren Sie es aus
Syntax
:modal {
/* ... */
}
Hinweise zur Verwendung
Beispiele für Elemente, die Interaktionen des Benutzers mit dem Rest der Seite verhindern und von der :modal
Pseudo-Klasse ausgewählt werden, umfassen:
- Das
dialog
-Element, das mit dershowModal()
API geöffnet wird. - Das Element, das durch die
:fullscreen
Pseudo-Klasse ausgewählt wird, wenn es mit derrequestFullscreen()
API geöffnet wird.
Beispiele
Stil eines modalen Dialogs
Ergebnis
Spezifikationen
Specification |
---|
HTML # selector-modal |
Selectors Level 4 # selectordef-modal |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:modal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
Siehe auch
dialog
-Element- Andere Pseudo-Klassen für Anzeigezustände von Elementen:
:fullscreen
und:picture-in-picture
- Vollständige Liste der Pseudo-Klassen