Best Way to Add Popup Modals in React

Подписаться 29 тыс.

Просмотров 8 тыс.

50% 1

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...
Code: github.com/col...
Demo: my-modal.verce...
📺 RU-vid: ru-vid.com...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #react #tailwindcss #javascript #modal #dialog #html #webdevelopment

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@colbyfayock Месяц назад

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

@nikitaliakhovka3489 4 месяца назад

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 4 месяца назад

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

@abishekbaiju1705 3 месяца назад

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 3 месяца назад

thanks for your kind words 🙏

@fran_sar 2 месяца назад

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 2 месяца назад

no problem!

@mohamedelmhassani5618 4 месяца назад

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

@colbyfayock 4 месяца назад

haha yes!! no problem 🙌

@santiso878 Месяц назад

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!

@colbyfayock Месяц назад

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!

@John-eq5cd 4 месяца назад

Excellent. Thank you, Colby.

@colbyfayock 4 месяца назад

you're welcome!

@dannievinther 4 месяца назад

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 4 месяца назад

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

@MohamedRabi 17 дней назад

fantastic video👍

@colbyfayock 17 дней назад

thanks!

@tylermorales9043 Месяц назад

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

@colbyfayock Месяц назад

From the syntax.fm store!! sentry.shop/products/syntax-webmaster-tee

@FlintBits 4 месяца назад

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

@colbyfayock 4 месяца назад

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 4 месяца назад

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

@colbyfayock 4 месяца назад

@@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-M_HujIFsIb0.html

@AhmadJS 4 месяца назад

👍👍👍👍👍

@colbyfayock 4 месяца назад

🙌

@EverydayBeing-de1qu 4 месяца назад

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.