dialog: opening as a modal window

Useful to know

<dialog> is a dialog box or similar interactive component. The showModal() method opens it modally: the remaining content of the document becomes inactive for interaction. The show() method shows non-modal dialogue. These are different modes, not just different names. [1]

For confirmation before deletion, the modal mode can help the person focus on the selection. For a help panel that needs to stay open while working with the main page, the non-modal mode might be more appropriate.

Give the dialogue an understandable title and a clear way to close. Check the focus when opening and return to the trigger control after closing. Adding a dark background to a plain div does not automatically reproduce the modal behavior of dialog; visual overlay and interaction constraint are separate parts of the task.