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