dialog = the easiest way to make a popup modal
Ever needed to make a modal? Well, we have a native HTML element that does the job with the dialog element! It does a lot of things out of the box that are really awesome, so let’s see how it works!
🔗 Links
✅ Codepen: https://codepen.io/kevinpowell/pen/KK...
✅ The polyfill: https://github.com/GoogleChrome/dialo...
✅ a11y modal: https://a11y-dialog.netlify.app/
✅ A great article that goes into a lot of detail on dialog: https://whistlr.info/2021/in-defence-...
✅ More info: https://developer.mozilla.org/en-US/d...
⌚ Timestamps
00:00 - Introduction
00:54 - What we're starting with
01:22 - Adding the dialog element
03:07 - the show() method
03:48 - the showModal() method
04:20 - closing the modal with close()
05:00 - closing the modal with a form submission
06:31 - styling the backdrop
07:46 - the default styling
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Watch video dialog = the easiest way to make a popup modal online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 17 March 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 193,026 once and liked it 8.2 thousand people.