Chrome Beta has landed its native support for <dialog> element without needing “Enable experimental Web Platform features.” flag turned on.

    <p>This button will open a native &lt;dialog&gt; element: <button id="show">Open Dialog</button></p>

    <dialog>
      <p>Here's the dialog with default styles!</p>
      <p>You can modify the styles if you wish.</p>
      <button id="close">Close</button>
    </dialog>

    <script>
      var dialog = document.querySelector('dialog');
      document.querySelector('#show').onclick = function() {
        dialog.show();
      };
      document.querySelector('#close').onclick = function() {
        dialog.close();
      };
    </script>
    
View full sample

Check out more sample codes and how it works in detail with a live demo.

There are a few changes applied to the implementation since the last announcement but notable one is:

  • Non-modal <dialog> is no longer vertically centered in the viewport. It has no special positioning behavior beyond its default CSS styling.

If you are curious about further details on the spec update, check out diffs here and here.

dialog semantics

Comments

0