Quick post on closedBy="any", a declarative way to add light-dismiss to a dialog:

<dialog closedBy="any">
  <p>Hi, I'm a dialog.</p>
</dialog>

And just like that, tapping or clicking outside the dialog will close it.

Oh yeah! Well I bet I can't use it yet. #

Here's the browser support:

Or a bit-o-js to get you started:

someDialog.addEventListener('click', ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
})

More resources #

You should write one!

I'm writing this because I haven't seen enough folks using it or talking about it. Pretty nifty feature if ya ask me. So I'll make a 10m post.

If you want more <dialog> goodness, I wrote a fun post about how to make nice dialogs cuz the defaults are so poopy. Check it out and have a dialog.