Widely availableA strong default for confirmations, short forms, and temporary overlays. Prefer it over custom modal scaffolding when browser support meets your project requirements.
Interactive Widely available

<dialog>

The <dialog> element provides a native way to build modal and non-modal dialogs. It handles the top layer, backdrop, and focus behavior more reliably than hand-rolled overlays.

InteractiveDialogModal

Overview

The <dialog> element provides a native way to build modal and non-modal dialogs. It handles the top layer, backdrop, and focus behavior more reliably than hand-rolled overlays.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<dialog>
37
79
98
15.4
37
15.4
HTML attribute
open
37
79
98
15.4
37
15.4
DOM API
HTMLDialogElement

The HTMLDialogElement interface provides methods to manipulate dialog elements. It inherits properties and methods from the HTMLElement interface.
37
79
98
15.4
37
15.4
cancel_event

The cancel event fires on a dialog element when the user triggers a close request.
37
79
98
15.4
37
15.4
close

The close() method of the HTMLDialogElement interface closes the dialog. An optional string may be passed as an argument, updating the HTMLDialogElement.returnValue of the dialog.
37
79
98
15.4
37
15.4
close_event

The close event is fired on an HTMLDialogElement object when the dialog it represents has been closed.
37
79
98
15.4
37
15.4
open

The open property of the HTMLDialogElement interface is a boolean value reflecting the open HTML attribute, indicating whether the dialog is available for interaction.
37
79
98
15.4
37
15.4
returnValue

The returnValue property of the HTMLDialogElement interface is a string representing the return value for a dialog element when it's closed. You can set the value directly (dialog.returnValue = "result") or by providing the value as a string argument to HTMLDialogElement.close() or HTMLDialogElement.requestClose().
37
79
98
15.4
37
15.4
show

The show() method of the HTMLDialogElement interface displays the dialog as a non-modal dialog.
37
79
98
15.4
37
15.4
showModal

The showModal() method of the HTMLDialogElement interface displays the dialog as a modal dialog, over the top of any other dialogs or elements that might be visible.
37
79
98
15.4
37
15.4
beforetoggle_event (dialog elements)

`beforetoggle` event fires at dialog elements
132
132
133
26
132
26
toggle_event (dialog elements)

`toggle` event fires at dialog elements
132
132
133
26
132
26
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<dialog id="myDialog">
  <h2>Confirm</h2>
  <p>Do you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open dialog</button>

Live demo

confirmdialog

Closepattern. with modaldialog display, form method="dialog". with showModal()

PreviewFullscreen

Inputform withdialog

dialoginsideformelement placement, yu-za-input pattern.

PreviewFullscreen

non-modaldialog

non-modaldisplay.background. operation that block, notificationbana- etc to usage. with show()

PreviewFullscreen

Use cases

  • Confirmation flows

    Use dialog for destructive actions, save confirmations, or short decision points where the user should focus on one task.

  • Small in-place forms

    A compact profile editor or quick-create form fits well when it should not navigate away from the current page.

Cautions

  • showModal() creates a modal experience, so make sure there is a clear close path and that escape-to-close behavior is intentional.
  • Do not use dialog for long, complex workflows that would work better as a full page or dedicated step flow.

Accessibility

  • Give every dialog a clear title and visible close action, and return focus to the trigger after closing.
  • Keep the content concise so keyboard and screen reader users can understand the purpose quickly.

Related links

Powered by web-features