Skip to content

Latest commit

 

History

History
44 lines (38 loc) · 2.37 KB

html-dialog-element.md

File metadata and controls

44 lines (38 loc) · 2.37 KB

The <dialog> element

Note

The dialog element has reached the tipping point of generally being the better option for web developers who need to implement dialogs in their web pages. The number of accessibility requirements a developer needs to be aware of, and the level of effort to implement custom ARIA dialogs is now largely taken care of by browsers. — Scott O'Hara

<button commandfor="my-dialog" command="show-modal" type="button">☰</button>

<dialog id="my-dialog" closedby="any">
  <!-- This form will close its dialog when submitted -->
  <form method="dialog">
    <header>
      <h3>Dialog title</h3>
      <button onclick="this.closest('dialog').close('close')">✗</button>
    </header>
    <article>…</article>
    <footer>
      <menu>
        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>
dialog::backdrop {
  /* Styles and animations for the backdrop */
}