closedBy=any

Adam Argyle October 16, 2025
Source
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: import "https://cdn.jsdelivr.net/npm/baseline-status"; 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!

Discussion in the ATmosphere

Loading comments...