HTML <Dialog> Tag

Definition

The <dialog> tag represents part of an application that a user interacts with, such as a dialog box or window.

Example

<script>
var dialog = document.querySelector('dialog');
document.querySelector('#open').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};
</script>

<dialog>
  <p>This is dialogue window.</p>
  <button id="close">Close me</button>
</dialog>
<button id="open">Open Dialog</button>

Usage

• Controlling the behavior of the dialog box usually requires JavaScript.
• You must include both the opening and closing tags.
• The <tabindex> attribute should not be used on <dialog> elements.
• <form> elements with the attribute method="dialog" are able to close dialog windows.

Attributes

The <dialog> element only supports the Event Attributes and Global Attributes, along with the following:

• open

  The open attribute is a boolean that states whether the <dialog> element is active or not. If the open attribute is omitted, then the <dialog> element will be hidden from the user. For example

  <dialog open>This is dialogue window.</dialog>

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile