<dialog> HTML Tag

What does <dialog> HTML Tag do?

The <dialog> element is used to create a dialog box such as a popup or modal window that is rendered within the active browser window. Defining the behavior of a <dialog> element typically requires the use of JavaScript.

Display

block

Code Example

<dialog>
  <p>This is an HTML dialog! Click the button to close it.</p>
  <button id="close">Close Dialog</button>
</dialog>
<button id="show">Show Me the Dialog!</button>
<script>
  /* Thanks to Eiji Kitamura for the dialog demo which you can see at https://demo.agektmr.com/dialog/ */
  var dialog = document.querySelector('dialog');
  document.querySelector('#show').onclick = function() {
    dialog.show();
  };
  document.querySelector('#close').onclick = function() {
    dialog.close();
  };
</script>

Popups in the Same Browser Window

The dialog allows a webpage to create popup or modal windows within the same browser window rather than doing so by launching a new browser window. The purpose of the dialog element is to improve accessibility of mobile applications by making popups and modals part of the webpage DOM model.

Browser support for the dialog element is still quite limited. So if you do plan to use this element you should be sure to provide fallback options for users using non-supported browsers.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for dialog

Not supported.	Not supported.	45	Not supported.	Not supported.	34