:modal

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();
});

:modal {
 /* ... */
}

<!-- Basic 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>

: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()}`;
});

Help improve MDN

This page was last modified on ⁨Jul 14, 2025⁩ by MDN contributors.