New in HTML5.

<dialog> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
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>

This is an HTML dialog! Click the button to close it.

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 is a technical writer who specializes in developer documentation and tutorials.

Browser Support for dialog

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