DEV Community

Cover image for Popup with Pure CSS

Popup with Pure CSS

Tayfun Erbilen on October 10, 2019

Before start to article, I'm sorry for my bad english. I'm still improving my self. So, let's start. I believe, we don't need to use Javascript in...
Collapse
 
pawelmadeja profile image
Pawel Madeja

Nice! It's worth mentioning that there's also a native HTML element <dialog>: css-tricks.com/some-hands-on-with-...

Unfortunately it's not widely supported by browsers now: caniuse.com/#search=dialog

Collapse
 
iceorfiresite profile image
Ice or Fire

We're stuck with polyfills for now

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen

Yeah also very limited for now :/

Collapse
 
felixdorn profile image
Félix Dorn

Great! What about accessibility? It's a key point of doing good pop-up, I guess?

Collapse
 
spone profile image
Spone • Edited

I thinks the main accessibility problem with this approach is that the focus is not "locked" in the popup. See an overview of the current way of doing that here: stackoverflow.com/a/44481275/1789900

EDIT: also relevant developer.mozilla.org/en-US/docs/W...

Collapse
 
tayfunerbilen profile image
Tayfun Erbilen • Edited

Well yeah, we need to use javascript, I know, but for little things I believe we can use pure css :)

Collapse
 
noaudio profile image
Samuel Odongo

Thanks for the post! Always looking for new people to follow

Collapse
 
ziizium profile image
Habdul Hazeez

This is cool!

Collapse
 
zenotds profile image
Zeno

Wow. That's some very smart stuff.

Collapse
 
grantiago profile image
grantiago

Very nice. Thank you. What I learned here is SASS.