Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:modal
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Die:modalCSSPseudoklasse wählt ein Element aus, das sich in einem Zustand befindet, in dem es alle Interaktionen mit Elementen außerhalb von sich selbst 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
button { display: block; margin: auto; width: 10rem; height: 2rem;}:modal { background-color: beige; border: 2px solid burlywood; border-radius: 5px;}p { color: black;}<p>Would you like to see a new random number?</p><button>Show me</button><dialog> <form method="dialog"> <p>Lucky number is: <strong></strong></p> <button>Close dialog</button> </form></dialog>const showNumber = document.getElementById("showNumber");const favDialog = document.getElementById("favDialog");const number = document.getElementById("number");showNumber.addEventListener("click", () => { number.innerText = Math.floor(Math.random() * 1000); favDialog.showModal();});Syntax
:modal { /* ... */}Verwendungshinweise
Beispiele für Elemente, die Benutzerinteraktionen mit dem Rest der Seite verhindern und von der:modal Pseudoklasse ausgewählt werden, sind:
- Das
dialogElement, das mit dershowModal()API geöffnet wurde. - Das Element, das von der
:fullscreenPseudoklasse ausgewählt wird, wenn es mit derrequestFullscreen()API geöffnet wurde.
Beispiele
Stilisierung eines modalen Dialogs
Dieses Beispiel stilisiert einen modalen Dialog, der geöffnet wird, wenn die Schaltfläche "Details aktualisieren" aktiviert wird. Dieses Beispiel basiert auf dem<dialog> ElementBeispiel.
<!-- Basic modal dialog containing a form --><dialog> <form method="dialog"> <p> <label >Favorite animal: <select> <option value="default">Choose…</option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </label> </p> <div> <button value="cancel">Cancel</button> <button value="default">Confirm</button> </div> </form></dialog><p> <button>Update details</button></p><output></output>CSS
:modal { border: 5px solid red; background-color: yellow; box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);}const updateButton = document.getElementById("updateDetails");const favDialog = document.getElementById("favDialog");const outputBox = document.querySelector("output");const selectEl = favDialog.querySelector("select");const confirmBtn = favDialog.querySelector("#confirmBtn");// If a browser doesn't support the dialog, then hide the// dialog contents by default.if (typeof favDialog.showModal !== "function") { favDialog.hidden = true; // Your fallback script}// "Update details" button opens the <dialog> modallyupdateButton.addEventListener("click", () => { if (typeof favDialog.showModal === "function") { favDialog.showModal(); } else { outputBox.value = "Sorry, the dialog API is not supported by this browser."; }});// "Favorite animal" input sets the value of the submit buttonselectEl.addEventListener("change", (e) => { confirmBtn.value = selectEl.value;});// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]favDialog.addEventListener("close", () => { outputBox.value = `${ favDialog.returnValue } button clicked - ${new Date().toString()}`;});Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # selector-modal |
| Selectors Level 4 # selectordef-modal |
Browser-Kompatibilität
Siehe auch
dialogElement- Andere Pseudoklassen für Elementanzeigestatus:
:fullscreenund:picture-in-picture - Vollständige Liste derPseudoklassen