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! 😁
Thank you! As for the shift you probably want to add scrollbar-gutter: stable; this prevents the document from shifting when a scrollbar appears and disappears
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?
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 ?
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.
Wow, this is so much easier than using Headless UI Dialog + Transition components. Thank your for the video.
tailwind has an `open` modifier to conditionally add styles when a or element is in an open state, e.g. open:opacity-100
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! 😁
Great Video. I have always struggled building Modal with forms. This makes it so much easier
This is indeed AWESOME. Thanks for showing me.
That was exactly what I need. Thanks a lot. Liked and subscribed.
Thank you, great video! Is it possible to animate dialog element with framer motion? Struggling to find a solution for it :/ 🙌🏽
thank you, this helped me a lot :)
Thanks, great video❤. Any hack how to battle body scroll when dialog is opened? Overflow:hidden is not the option, makes layout shift.
Thank you!
As for the shift you probably want to add scrollbar-gutter: stable; this prevents the document from shifting when a scrollbar appears and disappears
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?
A clear tutorial on the new HTML Dialog Element. Thanks.
{2024-02-16}, {2024-03-19}
Yes, that is today!
Amazing 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 ?
wao nice 🙌 I will test if it can be used for popover or side sheet!
Perhaps using the show method instead of showmodal then makes more sense. Definitely try that!
very useful example!
What browser are you using for these examples?
Thanks! I’m using the Arc browser.
When i use this it does not trap the focus. I can tab onto the address bar.
Thank you it helped a lot but my modal isnt centered. Do you know why?
Try adding position fixed and inset 0 to your modal. That should work I think.
@@frontendfyi Thank you very much
nice your work ❤🔥
Thank you so much ❤️
I am now wasting my time building native dialogs instead 💪
Hahaha. It’s so fun though! If you liked this you’ll probably love the video that drops next week too!
should have just made the video using base JS and CSS. not Tailwind...
I’m sorry to hear you don’t like tailwind
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.