The :modalCSSpseudo-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.
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 --><dialogid="favDialog"><formmethod="dialog"><p><label>Favorite animal:
<select><optionvalue="default">Choose…</option><option>Brine shrimp</option><option>Red panda</option><option>Spider monkey</option></select></label></p><div><buttonvalue="cancel">Cancel</button><buttonid="confirmBtn"value="default">Confirm</button></div></form></dialog><p><buttonid="updateDetails">Update details</button></p><output></output>
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 - ${newDate().toString()}`;});