HTML / HTML Tags

HTML <Dialog> Tag

Oct 12, 2022
1 min read
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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesNoNoYesNo

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesNoYesNoYes