dialog Element Sample

Available in Chrome 37+ | View on GitHub | Browse Samples

This button will open a native dialog element:

Here's the dialog with default styles!

You can modify the styles if you wish.

HTML Snippet

<p>
  This button will open a native dialog 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>

JavaScript Snippet

var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};