Semantic & Interactive

<dialog> Modal

Native modal and non-modal dialogs.

1Built-in Modals

<dialog> gives you a native modal. Call .showModal() to open it (focus trap + backdrop included), .close() to dismiss.

Example Code

css

<dialog id="confirm">
  <form method="dialog">
    <p>Are you sure you want to delete this?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>

<button onclick="confirm.showModal()">Delete account</button>

2Put the element in context

A dialog can present a focused interaction, but its opening method and context determine how it behaves. A modal needs intentional focus movement, a clear dismissal action, and a return path to the initiating control. An overlay appearance alone does not supply these behaviors.

3Practice with a small page

Open a small dialog from a real button and provide a clear close action. Test keyboard focus and Escape behavior, then inspect where focus returns. Keep the task short and use an ordinary page region when interruption is unnecessary.

Finished reading?

Mark this topic as complete to track progress.

Next Topic