Web/HTML/Element/dialog

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

Content categories	Flow content, sectioning root
Permitted content	Flow content
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content
Implicit ARIA role	dialog
Permitted ARIA roles	`alertdialog`
DOM interface	`HTMLDialogElement`

Attributes

This element includes the global attributes.

The tabindex attribute must not be used on the <dialog> element.

open: Indicates that the dialog is active and can be interacted with. When the open attribute is not set, the dialog shouldn't be shown to the user.

Usage notes

<form> elements can close a dialog if they have the attribute method="dialog". When such a form is submitted, the dialog closes with its returnValue property set to the value of the button that was used to submit the form.
The ::backdrop CSS pseudo-element can be used to style behind a <dialog> element when the dialog is displayed with HTMLDialogElement.showModal(). For example, to dim unreachable content behind the modal dialog.

Examples

Simple example

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Advanced example

This example opens a pop-up dialog box that contains a form, when the "Update details" button is clicked.

HTML

<!-- Simple pop-up dialog box containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p><label>Favorite animal:
      <select>
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </label></p>
    <menu>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<output aria-live="polite"></output>

JavaScript

var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.querySelector('output');
var selectEl = document.querySelector('select');
var confirmBtn = document.getElementById('confirmBtn');

// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});

Result

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<dialog>' in that specification.	Living Standard
HTML 5.2The definition of '<dialog>' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`dialog`	Chrome Full support 37	Edge Full support 79	Firefox Full support 53 Notes' Disabled' Full support 53 Notes' Disabled' Notes' See bug 840640. Disabled' From version 53: this feature is behind the `dom.dialog_element.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 24	Safari No support No	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 53 Notes' Disabled' Full support 53 Notes' Disabled' Notes' See bug 840640. Disabled' From version 53: this feature is behind the `dom.dialog_element.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 24	Safari iOS No support No	Samsung Internet Android Full support 3.0
`open`	Chrome Full support 37	Edge Full support 79	Firefox Full support 53 Notes' Disabled' Full support 53 Notes' Disabled' Notes' See bug 840640. Disabled' From version 53: this feature is behind the `dom.dialog_element.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 24	Safari No support No	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 53 Notes' Disabled' Full support 53 Notes' Disabled' Notes' See bug 840640. Disabled' From version 53: this feature is behind the `dom.dialog_element.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 24	Safari iOS No support No	Samsung Internet Android Full support 3.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.

Polyfill

Include this polyfill to provide support for browsers without <dialog> element.

dialog-polyfill