<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

<dialog>

• Attributes: all global HTML attributes such as id, class, data-
  • open shows dialog. By default this attribute is absent which means the dialog is hidden. Note: open makes the dialog non-modal, so is instead recommended to use the .show() or .showModal() for greater control.
• DOM interface: HTMLDialogElement
  • HTMLDialogElement.open returns true of false reflecting the state
  • HTMLDialogElement.returnValue string reflecting the return value for the dialog
  • HTMLDialogElement.show() opens as non-modal, allowing interaction outside
  • HTMLDialogElement.showModal() opens as modal, preventing interaction outside
  • HTMLDialogElement.close() closes the dialog

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