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:
dialog.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.
