showModal()

A modal that traps focus for you

Caveatshow() and showModal() are different elements in practice. Only the modal one gets ::backdrop, makes the rest of the page inert, traps focus and closes on Escape. Call the wrong one and you have a floating box with none of it.

FallbackClose it with <form method="dialog"> and the button needs no script at all. Escape fires cancel, not close, so intercept that one if you need to confirm.

<dialog>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

// not .show() — that skips all of it
dialog.showModal();

Published 2 Aug 2026