HTML: dialog

The <dialog> element represents a dialog or interactive popup that can be opened and closed.

Minimal example

<button id="open" type="button">Open settings</button>
<dialog id="settings">
  <h2>Settings</h2>
  <p>Choose your preferences.</p>
  <button id="close" type="button">Close</button>
</dialog>

const dialog = document.querySelector('#settings');
document.querySelector('#open')?.addEventListener('click', () => dialog?.showModal());
document.querySelector('#close')?.addEventListener('click', () => dialog?.close());

showModal() opens a modal dialog and places it in the top layer. The user must close it before returning to the rest of the page.

Modal or non-modal

show() opens a non-modal dialog. Use a modal only when the task requires focused attention, and always provide an obvious way to close it.

Common mistakes

• Do not open a dialog without a close button or another clear escape path.
• Use a heading and meaningful text so the purpose is understandable.
• Do not use a modal for information that users must compare with the page behind it.