:modal CSS Pseudo Class
Description
The CSS :modal pseudo class matches elements that are in a state in which they exclude all interaction with elements outside it until the interaction has been dismissed. This includes elements that are opened modally, such as dialog elements opened with the showModal() API, and elements that are in full-screen mode.
The :modal pseudo class can be used to style modal elements without requiring extra CSS classes. This can be useful for styling modals consistently across your application, and for avoiding the need to add and remove classes when opening and closing modals.
Here is an example of how to use the :modal pseudo class to style all modal elements on a page:
:modal {
border: 10px solid red;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
This will give all modal elements a red border, a semi-transparent black background, and a high z-index, so that they are displayed on top of all other content.
Here are some benefits of using the
:modal pseudo class:- It is more efficient than using CSS classes, as it does not require adding and removing classes when opening and closing modals.
- It is more consistent, as it ensures that all modal elements on a page are styled in the same way.
- It is more flexible, as it allows you to style modal elements based on their state, rather than having to rely on specific classes.
Overall, the
:modal pseudo class is a powerful new tool that can be used to style modal elements more efficiently, consistently, and flexibly.
Syntax
:modal {
/* ... */
}
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>
<script>
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()}`;
});
</script>:modal {
border: 5px solid red;
background-color: yellow;
box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}Browser Support
The following table will show you the current browser support for the CSS :modal pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 105 | 105 | 103 | 91 | 15.6 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 105 | 103 | 72 | 15.6 | 20 | 105 |
Last updated by CSSPortal on: 1st October 2023