demo · v133

Dialog Light Dismiss

<dialog closedby="any"> closes itself when the user clicks the backdrop or presses Esc. Pick a value, open the dialog, and click outside or press Esc to see which gestures dismiss it.

Open the dialog, try Esc, try clicking the backdrop, try the close button. The log records what fired.

Try to dismiss this dialog — Esc, click outside, or the close button. The behaviour depends on the closedby setting above.

checking support…

the HTML

<dialog closedby="any">
  Tap outside or press Esc to dismiss.
  <form method="dialog"><button>close</button></form>
</dialog>

see also