HTML dialog element

The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

The HTML <dialog> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes block interaction with other UI elements, making the rest of the page inert, while non-modal dialog boxes allow interaction with the rest of the page.

When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using HTMLDialogElement.showModal() to open a <dialog>, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the autofocus attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog’s content is dynamically rendered when invoked, the <dialog> element itself may provide the best initial focus placement.