Best Way to Add Popup Modals in React

Add modal dialogs in React that pop up in the browser using the HTML Dialog element.
Learn how to use the native browser Dialog element in React to dynamically render modal content, show and hide the modal, and navigate through a gallery of images using arrow keys. We'll even see how we can use Tailwind to customize the style of the modal.
🧰 Resources
Tutorial: spacejelly.dev/posts/how-to-c...
Code: github.com/colbyfayock/my-modal
Demo: my-modal.vercel.app/
📺 KZbin: kzbin.info?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #react #tailwindcss #javascript #modal #dialog #html #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@nikitaliakhovka3489]

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"

[@colbyfayock]

i still have yet to spend time with :has 😅 i need to!

[@abishekbaiju1705]

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.

[@colbyfayock]

thanks for your kind words 🙏

[@colbyfayock]

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

[@fran_sar]

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.

[@colbyfayock]

no problem!

[@John-eq5cd]

Excellent. Thank you, Colby.

[@colbyfayock]

you're welcome!

[@mohamedelmhassani5618]

Thaaaanks Colby, so helpful. no more extra KBs to my projects 😂

[@colbyfayock]

haha yes!! no problem 🙌

[@dannievinther]

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.

[@colbyfayock]

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

[@AhmadJS]

👍👍👍👍👍

[@colbyfayock]

🙌

[@FlintBits]

Why wouldn't you use popover api? By definition it is the "best way"

[@colbyfayock]

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]

​@@colbyfayock I would argue a light dismiss for a photo popup is better than a button, even more so on mobile.

[@colbyfayock]

​@@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: kzbin.info/www/bejne/g5Crpp1_e9h8mJI

[@EverydayBeing-de1qu]

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.

[@MohamedElguarir]

yeah well until you want to hit escape to close the modal or change focus using the keyboard 🤷🏻‍♂️

[@colbyfayock]

if you dont care about UX, sure