HTML <dialog> Tag

The <dialog> element represents a dialog box or a window. It is possible to create pop-up dialogs and modals easier by using the <dialog> element.

Recommendation: Because this won't show anything visually, you need to use Javascript Functions to show or hide it.

Note: This is a new tag which came with HTML5, and is supported only by Google Chrome.

Syntax

The <dialog> element comes in pairs. The content must be written between opening (<dialog>) and closing (</dialog>) elements.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    dialog {
      width: 40%;
      margin-top: 100px;
      background: lightgray;
      border: 4px solid #1c87c9;
    }
    button {
      padding: 10px;
      outline: none;
      background: #1c87c9;
      color: white;
      font-size: 16px;
      font-weight: 500;
    }
    span {
      color: red;
    }
  </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>
    <p><span>Reminder: </span>This works only in Google Chrome.</p>
  </div>
  <script type="text/JavaScript">
      (function () {
          var dialog = document.getElementById('DialogExample');
          document.getElementById('show').onclick = function () {
              dialog.show();
          };
          document.getElementById('hide').onclick = function () {
              dialog.close();
          };
      })();
  </script>
</body>
</html>

Attributes

Attribute Value Description
open open Defines that dialog element is active and the user can interact with it.

The <dialog> tag also supports the Global Attributes.