Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

The HTML <dialog> element represents a dialog box or other interactive component, such as an inspector or window.

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
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 available for interaction. When the open attribute is not set, the dialog shouldn't be shown to the user.

Usage notes

  • <form> elements can be integrated within a dialog by specifying them with the attribute method="dialog". When such a form is submitted, the dialog is closed with its returnValue attribute set to the value of the form's submit button that was used.
  • The ::backdrop CSS pseudo-element can be used to style behind a <dialog> element, for example to dim inaccessible content whilst a modal dialog is active. The backdrop is only drawn when the dialog element is displayed with HTMLDialogElement.showModal().

Examples

Simple example

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

Advanced example

This example opens a pop-up dialog box containing 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>Cancel</button>
      <button>Confirm</button>
    </menu>
  </form>
</dialog>

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

<div id="output"></div>

JavaScript

(function() {
  var updateButton = document.getElementById('updateDetails');
  var favDialog = document.getElementById('favDialog');
  var outputBox = document.getElementById("output");

  // “Update details” button opens the <dialog> modally
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
    output.innerHTML += "<div>" + favDialog.returnValue + " button clicked!</div>";
  });
})();

Result

Which button was clicked can be determined from favDialog’s returnValue.

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 37Edge No support NoFirefox 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 NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox 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 No support NoSafari iOS No support NoSamsung Internet Android Full support Yes
openChrome Full support 37Edge No support NoFirefox 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 NoOpera Full support 24Safari No support NoWebView Android Full support 37Chrome Android Full support 37Edge Mobile No support NoFirefox 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 No support NoSafari iOS No support NoSamsung Internet Android Full support Yes

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.

Polyfills

Include this polyfill to provide support for older browsers.  

dialog-polyfill

See also

Document Tags and Contributors

Last updated by: rajsite,