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

#colbyfayock #react #tailwindcss #javascript #modal #dialog #html #webdevelopment

[nikitaliakhovka]

For the document overflow, you can leverage the power of the :has() selector:

CSS:
html:has(dialog[open]) { overflow: hidden; }

Tailwind:
(on html tag)

[abishekbaiju]

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.

[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.

[mohamedelmhassani]

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

[dannievinther]

Awesome stuff :) A better choice, I believe, would be to use the Popover API: e.g., <dialog popover>. That way you get more of the functionality for free as well as a implicit role.

[santiso]

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!

[tylermorales]

I need your shirt. Where can I get it!!!

[FlintBits]

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

[EverydayBeing-dequ]

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.

[farzad]

modal must have in/out animations. your modal is useless and cheap and simple