GeezerVison is showing developer.mozilla.org — :modal CSS pseudo-class - CSS | MDN
:modal CSS pseudo-class
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.
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.
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 id="showNumber">Show me</button>
<dialog id="favDialog">
<form method="dialog">
<p>Lucky number is: <strong id="number"></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();
});
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 "Show the dialog" button is activated. This example is adapted from the <dialog> element example.
<!-- A modal dialog containing a form -->
<dialog id="favDialog">
<form method="dialog">
<p>
<label>
Favorite animal:
<select>
<option>Choose…</option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</label>
</p>
<div>
<button>Cancel</button>
<button>Confirm</button>
</div>
</form>
</dialog>
<p>
<button id="showDialog">Show the dialog</button>
</p>
CSS
The :modal pseudo-class selects the dialog opened with showModal(), giving it a red border, a yellow background, and a box shadow.
css
:modal {
border: 5px solid red;
background-color: yellow;
box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}
const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
showButton.addEventListener("click", () => {
favDialog.showModal();
});