HTML Native DIALOG Element

This example shows how to use the native HTML Dialog which includes a backdrop. It uses a bit of Javascript to open the dialog (in the button in this example) and a bit in the close buttons within the dialog HTML to close it.

For more info: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

Code (minimum required)

<button type="button" style="width:200px;" onclick="document.getElementById('testDialog1').showModal();">Show Normal Dialog</button><br />

<dialog id="testDialog1">
  <header>
    <button onclick="this.closest('dialog').close();">X</button>
    Dialog 1
  </header>
  <div>
    <p>This is a medium sized dialog. The dialog will<br />
    automatically expand horizontally and vertically to<br />
    accomodate the content.</p>
    <div style="text-align:right;"><button type="button" style="margin:0;" onclick="this.closest('dialog').close();">Close</button></div>
  </div>
</dialog>