For the document overflow, you can leverage the power of the :has() selector: CSS: html:has(dialog[open]) { overflow: hidden; } Tailwind: (on html tag) className="[&:has(dialog[open])]:overflow-hidden"
Really awesome tutorial. Thank you a lot (from Argentina)! I found many code and styles details and concepts that I didn't know or just forgot helps a bunch.
Awesome stuff :) A better choice, I believe, would be to use the Popover API: e.g., . That way you get more of the functionality for free as well as a implicit role.
thanks! i haven't played around with Popover API but someone else mentioned that and i did a little looking around. it looks like they largely can both do the same thing but have different semantics and small functionally differences which matter more in the context of modal vs non-modal dialogs. i'l have to spend more time with it, both from a functionality perspective, and to understand those differences more. maybe can make a good video down the line here's what i sent in the other comment: ---- they have large crossover but behave a slightly differently. here are a few difference though they're small: developer.chrome.com/blog/introducing-popover-api/#the_difference_between_a_popover_and_a_dialog ... looks like there was some chatter regarding this on whatwg GitHub issues with some interesting notes about the differences, though the chatter died off end of last year: github.com/whatwg/html/issues/9376 it seems like the consensus is
There is a problem with the document overflow, when you click on an image at the bottom it opens the modal at the top of the page and you can’t see it and can’t scroll, but I asume is an easy fix with css, great tutorial by the way!
darn i coulda sworn i handled that. i think i was working on trying to use scrollTop to fix that, but unsure what solution i arrived at. thank you tho!
@@jessedv5915 looking at my demo i can't reproduce it: my-modal.vercel.app/ github.com/colbyfayock/my-modal/blob/main/src/app/page.tsx#L23-L30 are you able to reproduce there? perhaps its an ordering issue? I also have scroll-behavior:smooth on the root but thats just for the animated effect: github.com/colbyfayock/my-modal/blob/main/src/app/globals.css#L21-L24
they have large crossover but behave a slightly differently. here are a few difference though they're small: developer.chrome.com/blog/introducing-popover-api/#the_difference_between_a_popover_and_a_dialog what gives you the impression popover is "by definition" the best way compared to the dialog? looks like there was some chatter regarding this on whatwg GitHub issues with some interesting notes about the differences, though the chatter died off end of last year: github.com/whatwg/html/issues/9376 it seems like the consensus is
@@FlintBits yeah definitely agree. i don't add that functionality directly in the video but i link at the end to another video i produced to implement it: ruclips.net/video/M_HujIFsIb0/видео.html
This is what mdn says: Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a element is the right way to go. There is significant overlap between the two - you might for example want to create a popover that persists, but control it using declarative HTML. You can turn a element into a popover ( is perfectly valid) if you want to combine popover control with dialog semantics. Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.
Seems like alot of effort for a modal... I usually just create new component modal with fixed inset-0 bg-black bg-opacity-0 and then another div with h-full flex justify-center items-center and then a main with the actual modal and specify the h and w you want it to be.
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Brilliant, alllll the tutorials on the internet and nobody was using the actual dialog element properly yet. Thanks, this makes perfect sense now!
no problem!
I just read your article about this and it was super clear. Thanks a lot for making these content. subscribed to both youtube and newsletter.
thanks for your kind words 🙏
For the document overflow, you can leverage the power of the :has() selector:
CSS:
html:has(dialog[open]) { overflow: hidden; }
Tailwind:
(on html tag)
className="[&:has(dialog[open])]:overflow-hidden"
i still have yet to spend time with :has 😅 i need to!
This needs more views. Subscribed!
thanks 🙏
Really awesome tutorial. Thank you a lot (from Argentina)! I found many code and styles details and concepts that I didn't know or just forgot helps a bunch.
no problem!
This is a fabulous video. Thank you!
no problem!
Thaaaanks Colby, so helpful. no more extra KBs to my projects 😂
haha yes!! no problem 🙌
Excellent. Thank you, Colby.
you're welcome!
fantastic video👍
thanks!
Thank you for this material.
no problem!
Awesome stuff :) A better choice, I believe, would be to use the Popover API: e.g., . That way you get more of the functionality for free as well as a implicit role.
thanks! i haven't played around with Popover API but someone else mentioned that and i did a little looking around. it looks like they largely can both do the same thing but have different semantics and small functionally differences which matter more in the context of modal vs non-modal dialogs. i'l have to spend more time with it, both from a functionality perspective, and to understand those differences more. maybe can make a good video down the line
here's what i sent in the other comment:
----
they have large crossover but behave a slightly differently. here are a few difference though they're small: developer.chrome.com/blog/introducing-popover-api/#the_difference_between_a_popover_and_a_dialog
...
looks like there was some chatter regarding this on whatwg GitHub issues with some interesting notes about the differences, though the chatter died off end of last year: github.com/whatwg/html/issues/9376
it seems like the consensus is
Thanks for the nice share .
np!
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
I need your shirt. Where can I get it!!!
From the syntax.fm store!! sentry.shop/products/syntax-webmaster-tee
There is a problem with the document overflow, when you click on an image at the bottom it opens the modal at the top of the page and you can’t see it and can’t scroll, but I asume is an easy fix with css, great tutorial by the way!
darn i coulda sworn i handled that. i think i was working on trying to use scrollTop to fix that, but unsure what solution i arrived at. thank you tho!
Hey how would you fix that
@@colbyfayock Hey how would you fix that
@@jessedv5915 looking at my demo i can't reproduce it: my-modal.vercel.app/
github.com/colbyfayock/my-modal/blob/main/src/app/page.tsx#L23-L30
are you able to reproduce there? perhaps its an ordering issue?
I also have scroll-behavior:smooth on the root but thats just for the animated effect: github.com/colbyfayock/my-modal/blob/main/src/app/globals.css#L21-L24
Why wouldn't you use popover api? By definition it is the "best way"
they have large crossover but behave a slightly differently. here are a few difference though they're small: developer.chrome.com/blog/introducing-popover-api/#the_difference_between_a_popover_and_a_dialog
what gives you the impression popover is "by definition" the best way compared to the dialog?
looks like there was some chatter regarding this on whatwg GitHub issues with some interesting notes about the differences, though the chatter died off end of last year: github.com/whatwg/html/issues/9376
it seems like the consensus is
@@colbyfayock I would argue a light dismiss for a photo popup is better than a button, even more so on mobile.
@@FlintBits yeah definitely agree. i don't add that functionality directly in the video but i link at the end to another video i produced to implement it: ruclips.net/video/M_HujIFsIb0/видео.html
This is what mdn says: Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a element is the right way to go. There is significant overlap between the two - you might for example want to create a popover that persists, but control it using declarative HTML. You can turn a element into a popover ( is perfectly valid) if you want to combine popover control with dialog semantics.
Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.
👍👍👍👍👍
🙌
Seems like alot of effort for a modal... I usually just create new component modal with fixed inset-0 bg-black bg-opacity-0 and then another div with h-full flex justify-center items-center and then a main with the actual modal and specify the h and w you want it to be.
yeah well until you want to hit escape to close the modal or change focus using the keyboard 🤷🏻♂️
if you dont care about UX, sure
modal must have in/out animations. your modal is useless and cheap and simple
oh damn, didnt know that was a prereq
bro, this is a tutorial