Create and display a modal dialog.

by Spencer Smith

HTML

<button id="open-dialog">Open Modal Dialog</button>

<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>This is a modal dialog with focus trapped inside.</p>
  <input type="text" placeholder="Focusable input">
  <button id="close-dialog">Close</button>
</dialog>

<!-- The rest of the page content, which becomes inert -->
<main>
  <a href="#">Link outside dialog</a>
  <button>Another button outside</button>
</main>

JavaScript

const dialog = document.getElementById("myDialog");
const openButton = document.getElementById("open-dialog");
const closeButton = document.getElementById("close-dialog");

// "Show the dialog" button opens the dialog modally
openButton.addEventListener("click", () => {
  dialog.showModal(); // Use showModal() for automatic focus trapping
});

// "Close" button within the dialog closes it
closeButton.addEventListener("click", () => {
  dialog.close();
});