Sign up to save your podcasts
Or
Share closedBy=any
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
closedBy=any
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
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.Also checkout the Dialog Starter notebook!
View all episodes
By 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
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.Also checkout the Dialog Starter notebook!