DEV Community

Discussion on: Creating Modal Windows with Pure CSS: No JavaScript Required

Collapse
 
xwero profile image
david duymelinck

I find it a bit strange that nobody mentioned the dialog html element.
It is better than using a div and it has javascript events.

If you are feeling adventurous the CSS tricks from this post can be used. Personally I would stick to the small amount of javascript you need to add to make the dialog working.

Collapse
 
jesterly profile image
jesterly

Zero JS code is required if you use the Popover API with dialog element.

Collapse
 
xwero profile image
david duymelinck

Thank you for sharing that, I didn't know it existed. From MDN I see it is an experimental feature.

Thread Thread
 
jesterly profile image
jesterly

You're welcome. It's only experimental if you use hint popovers:

developer.mozilla.org/en-US/docs/W...

Collapse
 
maxprilutskiy profile image
Max Prilutskiy

If you are feeling adventurous the CSS tricks from this post can be used

Haha, yes, exactly!

We personally do use these tricks internally, but most of the time, from what we see, it's a design system / component library implementation detail.