Don't Waste Your Time Building Custom Dialogs

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

[@nikitaliakhovka3489]

tailwind has an `open` modifier to conditionally add styles when a or element is in an open state, e.g. open:opacity-100

[@frontendfyi]

This is so true!! You are right. Tailwind keeps adding so many features that I often forget what’s included. Amazing comment, thanks for adding that! 😁

[@JustSall]

Great Video. I have always struggled building Modal with forms. This makes it so much easier

[@ThugLifeModafocah]

This is indeed AWESOME. Thanks for showing me.

[@rithalius8219]

That was exactly what I need. Thanks a lot. Liked and subscribed.

[@IvanKleshnin]

Wow, this is so much easier than using Headless UI Dialog + Transition components. Thank your for the video.

[@a_maxed_out_handle_of_30_chars]

thank you, this helped me a lot :)

[@alintdg9896]

Amazing video!

[@Happyday-nn6rh]

nice your work ❤‍🔥

[@frontendfyi]

Thank you so much ❤️

[@Sahil-me5kg]

Nice Video ! just wanted to ask that sudden jump while closing dialog fixes if we make the inset-0 but it ocurrs if we scroll a bit if there is fixed navbar on top even if inset-0 is applied but works perfectly if no scroll . Any suggestions how to fix that ?

[@CanisLatransMedia]

Thank you, great video! Is it possible to animate dialog element with framer motion? Struggling to find a solution for it :/ 🙌🏽

[@amitakolkar2389]

Hi, Nice way to build a modal. But as.a part of accessibility focus needs to be trapped. Not sure but focus is not trapping in modal
recently? Any idea?

[@harpo187bling]

When i use this it does not trap the focus. I can tab onto the address bar.

[@armandsalle8447]

wao nice 🙌 I will test if it can be used for popover or side sheet!

[@frontendfyi]

Perhaps using the show method instead of showmodal then makes more sense. Definitely try that!

[@Pareshbpatel]

A clear tutorial on the new HTML Dialog Element. Thanks.
{2024-02-16}, {2024-03-19}

[@frontendfyi]

Yes, that is today!

[@FlorianRumpel]

Thank you it helped a lot but my modal isnt centered. Do you know why?

[@frontendfyi]

Try adding position fixed and inset 0 to your modal. That should work I think.

[@FlorianRumpel]

@@frontendfyi Thank you very much

[@equistenelabs]

very useful example!
What browser are you using for these examples?

[@frontendfyi]

Thanks! I’m using the Arc browser.

[@DavidsKanal]

I am now wasting my time building native dialogs instead 💪

[@frontendfyi]

Hahaha. It’s so fun though! If you liked this you’ll probably love the video that drops next week too!

[@user-no3vq7rm4i]

should have just made the video using base JS and CSS. not Tailwind...

[@frontendfyi]

I’m sorry to hear you don’t like tailwind

[@naylord5]

There are two types of people, the ones who are already using tailwind and the others than doesn't tried yet..
Trust me, once you try it, there is no coming back.