Build modals in minutes with the dialog element
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
✅ Video where I look at popover: https://www.youtube.com/watch?v=DNXEORSk4GU
✅ a11yproject on visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/
✅ Adrian’s article deailng with focus: https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CS…
Watch on YouTube ↗
(saves to browser)
Chapters (12)
Introduction
0:45
the basics of the dialog element
3:00
opening the dialog with .show() and .showModal()
7:30
adding a button to close the dialog
9:00
dealing with autofocus
11:15
make the close button accessible
12:25
styling them - there are a lot of user agent styles!
20:30
prevent the page from scrolling when a modal is opened
22:30
styling the backdrop
23:55
only add flex or grid on the opened state
25:40
use case for the .show() method
27:20
overcoming positioning issues that you might run into
DeepCamp AI