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

<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>

Finished reading?

Mark this topic as complete to track progress.

Next Topic