: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
: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 dershowModal()
API geöffnet wird. - Das Element, das durch die
:fullscreen
Pseudoklasse ausgewählt wird, wenn es mit derrequestFullscreen()
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
: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
dialog
Element- Andere Pseudoklassen für Anzeigezustände von Elementen:
:fullscreen
und:picture-in-picture
- Vollständige Liste der Pseudoklassen