Native Dialogs With HTML <dialog> Element: Tips And Tricks
Native dialogs without JS? Try HTML <dialog> element! Blur backdrop with `backdrop-filter: blur(2px)` & disable page scrolling with `body:has(dialog[open]) { overflow: hidden; }` Check out Jumblie game for examples!
I recently was messing around with the HTML <dialog> element. It’s really handy for native dialogs without a ton of JavaScript. If you want to see a decent quick example of them in action, you can check out my game Jumblie and click the Settings gear button at the top. Anyway! There’s a couple tricks that you might find handy when you’re implementing your own <dialog>s on your websites! Blur the <dialog> backdrop The ::backdrop CSS pseudo-element isn’t limited to <dialog>s. You can style it however you want, but if you want to keep it simple, you can add a blur filter like so to be a...