You're still building dialogs/modals by using custom components? Don't! The HTML dialog element is supported in all major browsers, and it brings great accessibility out of the box. Adding a modal to your page has never been so easy!
In this video I'll show you how to add it, how forms work in dialogs and how you can animate these dialogs too.
👀 Timestamps
00:00 - Intro
00:20 - What we'll be building
01:26 - Start building
02:57 - Open the modal on button click
04:33 - A11y benefits it brings out of the box
06:15 - Overriding some default styles (including backdrop)
07:30 - Making the close button work
08:36 - Submitting forms in a dialog
13:52 - Animating the dialog
16:59 - Summary and outro
🔗 Live playground and code: www.frontend.fyi/v/dont-sleep...
💬 Join us on Discord: www.frontend.fyi/discord
🐦 Follow me on Twitter: / jeroenreumkens & / frontend_fyi
👨🏫 Check my mentorships: www.jeroenreumkens.nl/mentoring
#dialogelement #html #css #tailwind #frontend
Негізгі бет Ғылым және технология Don't Waste Your Time Building Custom Dialogs
Пікірлер: 28