Native dialog in HTML

dialog.html

<!-- You can use JSBin: https://jsbin.com/xoketogeda/edit?html,output to play around with it. -->

<!-- The dialog element is specified in HTML specification, §4.11.4 "The dialog
  element": https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element. -->

<button onclick="document.querySelector('dialog').showModal()">Open dialog</button>

<dialog style="width: 50%;">
  <h1>Native <code>&lt;dialog&gt;</code></h1>

  <p>
    Yes, it's native! No third-party libraries needed, no fancy things with <code>&lt;div&gt;</code>s
    and CSS! We only need some JavaScript to open it, closing can be done by the browser already:
  </p>

  <pre><code>document.querySelector('dialog').showModal()</code></pre>

  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>