<dialog> / Modal

• Dialog Polyfill

<dialog>
   <p>Hello</p>
   <button>Dismiss</button>
</dialog>

const dialog = document.querySelector("dialog")

dialog.show()
dialog.showModal() // backdrop + close with ESC
dialog.close()
dialog.close("123")
dialog.returnValue // = 123

dialog.addEventListener('close', function(event) {
    if (dialog.returnValue === 'yes') {
      /* ... */
    }
});

<dialog open>...</dialog>

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
dialog[open] {
  
}

Form Dialog

<dialog>
  <form method="dialog">
    <p>Would you like to continue?</p>
    <button type="submit" value="no">No</button>
    <button type="submit" value="yes">Yes</button>
  </form>
</dialog>