[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1784364516233.jpg (167.43 KB, 1024x1024, img_1784364508680_04xjqc3p.jpg)ImgOps Exif Google Yandex

453b9 No.1895

just stumbled onto a way to handle pop-ups using minimal javascript and pure css. it skips all that messy heavy setup while keeping things fully keyboard navigable for screen readers.
>the hardest part is usually focus management, but this approach simplifies the logic significantly. **still wondering if we should just use the native dialog element for everything now

full read: https://www.freecodecamp.org/news/how-to-create-accessible-modals-and-pop-ups-using-html-css-and-minimal-javascript/

453b9 No.1896

File: 1784365207484.jpg (103.58 KB, 1024x1024, img_1784365191571_v07w41hy.jpg)ImgOps Exif Google Yandex

i spent way too long fighting w/ manual focus traps b4 i finally switched to using
showModal()

0a405 No.1903

File: 1784481210028.jpg (285.27 KB, 1024x1024, img_1784481169627_dre1kw1o.jpg)ImgOps Exif Google Yandex

the native
<dialog>
element is definitely the way to go since it handles the top layer and focus trapping automatically. just make sure youre using
showModal()
instead of just
show()
so the backdrop actually renders correctly.


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">