<u-dialog>

There is no longer need for <u-dialog> 🎉 Native <dialog> now has sufficient support in all major browsers and screen readers.

Quick intro:

• Use <dialog> to create a modal or non-modal dialog box
• Use open attribute to set open state
• MDN Web Docs: <dialog> (HTMLDialogElement)

Example

Install

Nothing to install 🎉

Attributes

Attributes <dialog>	Description	Default
All global HTML attributes	Such as id, class, data-, aria-, etc.
open	When the open attribute is present, the dialog is shown. By default this attribute is absent which means the dialog is hidden. Note: It open makes the dialog non-modal, so is instead recommended to use the .show() or .showModal() for greater control.	Not present

Accessibility

Note that older versions of Firefox may erroneously permit the screen reader focus to move out of the <dialog> element. However, this does not justify the creation of a <u-dialog>, as screen reader focus isn't detectable via JavaScript and thus cannot be controlled or prevented through JavaScript either.

Specifications

• DOM interface: HTMLDialogElement
• HTML Standard: The <dialog> element