How does the dialog element work?

The dialog element gives you a styled container plus native modal behaviour. With showModal(), the browser moves focus into the dialog, makes the rest of the document inert and supports Escape to close.

<dialog id="confirm">
  <form method="dialog">
    <h2>Delete this item?</h2>
    <p>This action cannot be undone.</p>
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<script>
  const dialog = document.querySelector("#confirm");
  dialog.showModal();
</script>

What you get and what you still need

• showModal() opens a modal and makes background content inert
• show() opens a modeless dialog that does not block the page
• close() closes it, and the close event fires
• Escape closes a modal dialog by default
• form method=dialog closes the dialog and sets returnValue to the button value

Give the dialog an accessible name, usually with aria-labelledby pointing at its heading. The dialog role is implicit, so you do not need to add role=dialog. Manage focus deliberately, especially when you open or close it programmatically.