Don't Waste Your Time Building Custom Dialogs 

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

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

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

Thanks, great video❤. Any hack how to battle body scroll when dialog is opened? Overflow:hidden is not the option, makes layout shift.

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

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

thank you, this helped me a lot :)

This is indeed AWESOME. Thanks for showing me.

I am now wasting my time building native dialogs instead 💪

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

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 ?

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?

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

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

Amazing video!

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

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

nice your work ❤‍🔥

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