<dialog>Baseline · Widely available

The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–36Not supported

37+Supportedsince Aug 26, 2014

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–97Not supported

98+Supportedsince Mar 8, 2022

Current: 157

Safari

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

MobileChrome Android

18–36Not supported

37+Supportedsince Sep 3, 2014

Current: 155

Firefox Android

4–97Not supported

98+Supportedsince Mar 8, 2022

Current: 157

Safari iOS

1–15.3Not supported

15.4+Supportedsince Mar 14, 2022

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

HTML

<dialog id="confirm">
  <form method="dialog">
    <p>Delete this file?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("confirm");
  dialog.showModal(); // modal, with ::backdrop and focus trapping
  dialog.addEventListener("close", () => console.log(dialog.returnValue));
</script>

Feature detection

JS · check before using

const el = document.createElement("dialog");
if (!(el instanceof HTMLUnknownElement)) {
  // <dialog> is supported
}

Documentation (MDN)

Specification

html.spec.whatwg.org#the-dialog-element ↗

Usage share

caniuse.com/dialog ↗

Sub-features

Support for each part of the feature (12). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
HTMLDialogElement	37	79	98	15.4	37	98	15.4
HTMLDialogElement.cancel_event	37	79	98	15.4	37	98	15.4
HTMLDialogElement.close	37	79	98	15.4	37	98	15.4
HTMLDialogElement.close_event	37	79	98	15.4	37	98	15.4
HTMLDialogElement.open	37	79	98	15.4	37	98	15.4
HTMLDialogElement.returnValue	37	79	98	15.4	37	98	15.4
HTMLDialogElement.show	37	79	98	15.4	37	98	15.4
HTMLDialogElement.showModal	37	79	98	15.4	37	98	15.4
HTMLElement.beforetoggle_event.dialog_elements	132	132	133	26	132	133	26
HTMLElement.toggle_event.dialog_elements	132	132	133	26	132	133	26
dialog	37	79	98	15.4	37	98	15.4
dialog.open	37	79	98	15.4	37	98	15.4