{
  "$type": "site.standard.document",
  "description": "Declarative dialog light dismiss",
  "path": "/closedby-any",
  "publishedAt": "2025-10-16T04:42:39.052Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "html"
  ],
  "textContent": "Quick post on closedBy=\"any\" , a declarative way to add light-dismiss to a dialog: &#x3C; dialog closedBy = \"any\" > &#x3C; p >Hi, I'm a dialog.&#x3C;/ p > &#x3C;/ 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 <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 . Also checkout the Dialog Starter notebook!",
  "title": "closedBy=any"
}