<dialog>

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, it 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 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.

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 content

<!-- 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>

JavaScript content

(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();
  });
})();

Result

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.	Recommendation	Initial definition

Browser compatibility

[1] See bug 840640.

See also

• The close event
• The cancel event
• HTML forms guide.