HTML5 Rocks

HTML5 Rocks

dialog element: shipped in Chrome 37 Beta

By Eiji Kitamura at

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

<dialog>
  <p>This is da dialog!</p>
  <button id="close">Close</button>
</dialog>
<button id="show">Open Dialog!</button>
<script>
  var dialog = document.querySelector('dialog');
  document.querySelector('#show').onclick = function() {
    dialog.show();
  };
  document.querySelector('#close').onclick = function() {
    dialog.close();
  };
</script>

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 element: Modals made easy

By Eiji Kitamura at

Chrome Canary has landed support for the dialog element behind a flag. The dialog element can be used for popups in a web page.

  • show(): Open dialog.
  • close(): Close dialog. Takes an optional argument which if present dialog.returnValue is set to.
  • showModal(): Open modal dialog.
  • ::backdrop: Pseudo-element to style background behind a modal dialog.
  • close event: Fired when a dialog is closed.

Update on Dec 16th 2013

The dialog element now supports:

  • cancel event: Fired when the Escape key is pressed on a modal dialog. This event can be canceled using event.preventDefault().
  • autofocus attribute: The first form control in a modal dialog that has the autofocus attribute, if any, will be focused when the dialog is shown. If there is no such element, the first focusable element is focused.
  • form[method="dialog"]: Only valid inside a dialog. Upon form submission, it closes the dialog and sets dialog.returnValue to the value of the submit button that was used.

Check out details with a live demo and polyfill.

Turn it on by enabling "Enable experimental Web Platform features" in about://flags.