:modal Baseline 2022 Newly available
The :modal
CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the :modal
pseudo-class at the same time, but only one of them will be active and able to receive input.
Examples of elements that will prevent user interaction with the rest of the page and will be selected by the :modal
pseudo-class include:
The dialog
element opened with the showModal()
API.
The element selected by the :fullscreen
pseudo-class when opened with the requestFullscreen()
API.
This example styles a modal dialog that opens when the "Update details" button is activated. This example has been built on top of the <dialog>
element example .
<!-- Simple modal dialog containing a form -->
<dialog id="favDialog">
<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 id="confirmBtn" value="default">Confirm</button>
</div>
</form>
</dialog>
<p>
<button id="updateDetails">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> modally
updateButton.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 button
selectEl.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()}`;
});
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.