Skip to content

html-dialog-element.md

Latest commit

 

History

History
77 lines (59 loc) · 3.6 KB

html-dialog-element.md

File metadata and controls

77 lines (59 loc) · 3.6 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 */
}

closed-by attribute

<!-- No user-triggered closing of dialogs -->
<dialog closedby="none">

<!-- User pressing ESC (and other close requests) closes dialog -->
<dialog closedby="closerequest">

<!-- User clicking outside the dialog or pressing ESC closes dialog -->
<dialog closedby="any">

Resources

Gotchas

Antipatterns

Demos