DEV Community

Cassidy Williams
Cassidy Williams

Posted on • Originally published at cassidoo.co on

3 1 2 2 2

A couple CSS tricks for HTML Dialog elements

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 able to blur the background ever so slightly:

dialog::backdrop {
  backdrop-filter: blur(2px);
}
Enter fullscreen mode Exit fullscreen mode

You can add other properties, of course, like background-color for example. I also wrote about styling pseudo-elements with JavaScript if you want to do more with this in general!

Disable page scrolling when a <dialog> is open

This is a funky selector here, but it’s pretty cool. When a <dialog> is open, it adds an open attribute to the tag.

body:has(dialog[open]) {
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

This selector checks to see if the <body> has a <dialog> with the open attribute. If so, it disables scrolling on the page!

Granted, the weirdness is that if your dialogs are tall, you might need to enable scrolling in them separately, but it keeps the page behind your dialog from moving around when you scroll.

That’s all, folks! I hope this was helpful for you!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (1)

Collapse
 
jlrxt profile image
Jose Luis Ramos T. • Edited

Gracias por compartir no recisti y probé el código. Hice una modificación para que el body tuviera un color salmón y al cuadro de diálogo le escribí un fondo oscuro se ve genial, gracias a ti. Saludos.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay