Chris Manning digs into <diaglog>:

A dialog element provides:

  • An element that is easy to show and hide, including an open boolean attribute on the element itself.
  • Two versions: a standard popover or modal version.
  • A ::backdrop pseudo-element for modal types.
  • Built-in focus: see dialog focusing steps.
  • ARIA role support (dialog is the implied default). Also accepts the alertdialog role.
  • A pending stack for multiple dialogs.
  • A DOM interface with the open boolean and methods show, showModal, and close.

And those are just some highlights! Showing content on top of other content has never been easier.

This is the evolution of the web at it’s best. Identifying a major developer struggle and helping solve it.

Direct Link to ArticlePermalink

The post The dialog element appeared first on CSS-Tricks.