HTML - <dialog>

The HTML <dialog> element represents a dialog box or other interactive component, such as an inspector or window. <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 a returnValue attribute set to the value of the submit button used.

Examples

Example 1

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

Example 2

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

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

<script>
  (function() {
    var updateButton = document.getElementById('updateDetails');
    var cancelButton = document.getElementById('cancel');
    var favDialog = document.getElementById('favDialog');

    // Update button opens a modal dialog
    updateButton.addEventListener('click', function() {
      favDialog.showModal();
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener('click', function() {
      favDialog.close();
    });

  })();
</script>

Description  

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The HTML <dialog> element represents a dialog box or other interactive component, such as an inspector or window. <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 a returnValue attribute set to the value of the submit button 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.

Content categories Flow content, sectioning root
Permitted content Flow content
Tag omission None, both the starting and ending tag are mandatory.
Permitted parent elements Any element that accepts flow content
DOM interface HTMLDialogElement

Attributes

Includes the Global Attributes.

NameVersionDescription
open Indicates that the dialog is active and available for interaction. When the open attribute is not set, it shouldn't be shown to the user.

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 37 No support[1] No support 24 No support
Anchor points No support No support No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 37 No support No support No support No support
Anchor points No support No support No support No support No support

[1] See bug 840640.

See Also  

Specifications  

Specification Status Comment
WHATWG HTML Living Standard
The definition of '<dialog>' in that specification.
Living Standard  
HTML5.1
The definition of '<dialog>' in that specification.
Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/dialog