demo · v134

Dialog Light Dismiss

<dialog> learns a closedby attribute: none, closerequest (Esc only), or any (Esc + backdrop click). Pick a mode below, open the dialog, then try clicking outside, pressing Esc, and using the close button.

probing closedby attribute...

Try it

This dialog respects any.

  • any: backdrop click or Esc closes it
  • closerequest: only Esc closes it
  • none: only the close button closes it

The code

<dialog closedby="any">
  hello
  <form method="dialog"><button>close</button></form>
</dialog>
<script>
  document.querySelector('dialog').showModal();
</script>

see also