HTML `<dialog>` Tag

The <dialog> tag is one of the HTML5 elements. It is used to create a native dialog box, with which the user interacts and performs certain actions. For example, you can create pop-up messages or forms with this element. The dialog box is hidden from view by default. It becomes visible when the open attribute is set.

To display or hide the content, we need the JavaScript API.

If <form> elements are specified with the method="dialog" attribute, they can be combined within a dialog. If such a form is provided, the dialog closes when the form is submitted, and the returnValue property stores the value of the clicked button.

For styling behind the <dialog> element, you can use the CSS ::backdrop pseudo-element.

Syntax

The <dialog> tag comes in pairs. The content is written between the opening (<dialog>) and closing (</dialog>) tags.

Example of the HTML `<dialog>` tag:

HTML <dialog> Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Here is some text for example.
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Show dialog text</button>
    </div>
    <script type="text/javascript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Result

dialog example

Attributes

Attribute	Value	Description
open	open	Indicates that the dialog box is active, and the user can interact with it.

The <dialog> tag also supports the Global Attributes and the Event Attributes.

How to style an HTML <dialog> Tag

You can customize the dialog's appearance and its background overlay using CSS. The ::backdrop pseudo-element targets the area behind the dialog.

css

dialog {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Note on JavaScript methods: The example uses dialog.showModal(), which displays the dialog as a modal (blocking interaction with the rest of the page). To display a non-modal dialog that allows interaction with other elements, use dialog.show() instead.

Practice

What attributes does the HTML <dialog> tag support?

<open>: This Boolean attribute indicates that the dialog box is accessible and/ or interactive.<modal>: This attribute requires user interaction, and thereby prevents interaction with the rest of the web page until the dialog box is closed.The <dialog> tag does not support any attributes.<returnValue>: Unlike open and showModal(), this does not reflect a content attribute and its purpose is to hold a string which can be generated and used when the dialog box is closed.

HTML <dialog> Tag ​

Syntax ​

Example of the HTML <dialog> tag: ​

Result ​