Create a modal with React (Pop-up)

[@TJA91910]

I've referenced this video countless times for a variety of projects. Thank you for taking the time to put this together, you are a true hero!

[@streetrat7050]

Thank you so much for your contribution. I have spent far too long now trying to find an example that is simple, direct and to the point.

[@jameslovell5201]

Quick! Clear! Concise! An excellent tutorial, my friend!

[@thearxlive]

I dont usually comment on yt tutorials, but this is the only modal video I felt useful. Thankyou!

[@gautambedi591]

This is exactly what I was looking for. Keep the good work going mate!

[@ghislainmitahi2584]

really, i'm so happy to hear you again, i usually cach your french tutorials, this modal is all i wanted 🙏👌👌

[@johntalatala680]

I was looking something like this to insert into my project, Merci infiniment monsieur pour cette contribution. Vous etes magnifique!

[@lightsabercatspowpow]

Very very great video. You simplified this down to clean concise code that was very easy to follow. The css styling being done ahead of time helps a lot aswell because this video was how to make it work not how to make it pretty so thanks for getting that done outside the actual content! 10/10

[@alienfunbug]

Best modal video on youtube (or at least out of like 10 that I compared it with).

[@eskimo6097]

Thank you, you explained it so simply! Also, your accent is very cool :D

[@TheWebSchool]

Glad it helps ! The French accent never leaves ✌️

[@turyahabwamark82]

Beautifully done... Using basic concepts, in a Clear and concise way bro

[@diegoguatemala5287]

I have been referencing to this video many times, thanks man

[@tadeuvieira319]

Straight to the point. Perfect! You just got a follower.

[@Miguel_ECL]

Great quick & clear explanation! Thanks!

[@sumondatta6595]

You are superb!!! easily discuss and understandable code. Thank you so much.

[@juelmapereira4277]

Dude, this is so nice

[@danielmarx1056]

Thanks for this video, really nice and simple explanation

[@TheWebSchool]

Glad it helps, and nice pic in front of the Hungarian Parliament mate ✔️

[@melisandem1735]

Thanks, just what I was looking for ! Very Helpful.

[@ashwinpatidar2878]

It is very helpful video for building Modal using Vanilla CSS. Thanks.

[@kamichikora6035]

As always, great work. Straight to the point

[@ABC-el3ql]

WOW!! Thank you so much from S.Korea!!

[@MrACrazyHobo]

Very easy tutorial, thanks for the source code!

[@NeganSportNews]

An excellent tutorial! Thank you so much.

[@fancybeing1296]

iam always scared to code an overlay but this video literally helped me in 5 mins

[@inescherif5385]

short & clear ! thank u so much for that

[@Greenlight123]

Thanks. That is exactly what i was looking for. A Point of Reference

[@TheWebSchool]

Great 🔥

[@AdarshYadav-cf9be]

Thankyou so much brother i was suffering from so many problems thankyou so much...😢

[@User-nn9uw]

So simply, thank you dude

[@s1sko7]

Excellent!! :) But 2 things : 1 ) Why bother with State when you can just pass an "active-modal" class to body and handle everything with CSS? 2) Studies shows that a lot of people would click on the previous button of their browser when modal shows up. So we should prevent that maybe with a new page direction. Thoughts?

[@FleekGaming2411]

Thank You It's working!

[@diamondsky6605]

Wow même en anglais j'ai reconnu ta voix direct 😂 Je savais pas que tu avais une autre chaine

[@mohammedhassan-xc7nh]

so short and so clear Im Arabian but I understood so much thx bro

[@azashik5678]

Nice Tutorial Sir . Quick And clear

[@ortigaliyevmuhammadjon]

Thanks bro it was really useful 👍👍👍

[@chiomaubaezuonu3875]

You're amazing

[@samriddhabajpai1846]

Thank you for the easiest explanation!!

[@iafofkhadze4628]

wow u made this super easy tho

[@herbertrichard4561]

Very good tutorial, thank you ^^

[@ziyaulrana1840]

Very simple and easy method Thanks for motivation

[@TheWebSchool]

I appreciate ✌️

[@souravdutta5703]

wow!! you made creating modal so simple!!

[@BBoyXy]

Thank you, keep up the good work

[@ritchieways9495]

Thanks so much. You saved me

[@woochille7471]

Super helpful thanks!

[@0xBK201]

Thanks for this.

[@nehabhole1]

Great, quick tutorial for building modals however doesn't address event propagation. I build a form inside a modal and on click it closes the form.

[@IroshanaRavishan]

Really helpful...! Thank you

[@DS-qz2gu]

When I learned React, I learned that when you modify the current state to set a new state (e.g., negating a value to toggle boolean state), there’s a specific syntax to ensure that you get the current state instead of risking using a previous version of the state. Instead of this: setModal(!modal); You’d use this: setModal((prevModal) => !prevModal); Is this true? Is it just not important in this use case?

[@maciejkrogulski9216]

good tutorial, but how can You animate this modal? Especially closing modal?

[@ice12328]

Excellent Example

[@martinalvarez4663]

gracias perritoo sos crkack

[@Jonsy]

This is great!! thank you so much

[@polestudiosaroundtheworld]

Thank you, the tutorial is really clear! Just what I need.

[@TheWebSchool]

Glad to help

[@younesmansourbokhtache118]

Thank you so much, the tutorial is really clear

[@EvGen-e2d]

Ok the problem is what if my modal bigger height then viewport? overflow-y: scroll; doesn't help because it has different scroll and scrolls much slower then body scroll.

[@prasathj7436]

Excellent one. Thanks.

[@kamamedia3535]

thanks man, really nice n cool to implement

[@lucianoaraus8956]

Nice tutorial man!

[@mihaibalan1917]

This helped me a lot. How can I make the content of my modal scrollable? (I have a photo gallery in the modal)

[@ralpha973]

Est ce que t'es français ? Parce que t'as vraiment un accent

[@nicudomenti5235]

Nice video, thank you!

[@samuelsonowo6707]

I have a target value to display but when i click submit the value no longer display. What can i do?

[@phoneringhtone9711]

thank you my friend

[@nagireddypanditi6429]

Great tutorial!

[@TheWebSchool]

👍👍

[@gooddeveloper]

it's really cool

[@harshgoyal7114]

Thankyou for your help

[@ambitionhut]

This doesent work sadly on my end. The idea of creating both the button and modal in the same component only works if its like you example. But what if the button is on the navbar? when I do it, the modal pops up inside the navbar..

[@TheWebSchool]

Hey, yeah it was for the purpose of the video. Most of the time we use the context API or redux or whatever state manager to handle the triggering of a modal.

[@aanchaltripathy5985]

how can we delay the pop up message by a few milliseconds?

[@thehitlist4046]

Please how do you enable intellisense like when you did div.modal

[@ashadulmridha4265]

Wow man it's very Cool

[@gilbertorogel81]

Help, i have the exact same code and modal is not showing :s

[@TheWebSchool]

Source code is in the description my friend

[@rhul0017]

so which is the best method, using portals or using this approach?

[@daviddeltoro406]

Any way to make it so that it fades in and out smoothly?

[@attilakovacs4364]

ty great video,one question though,how do I enable scrolling in the modal? I added overflow-y: auto or scroll but it doesnt work.

[@attilakovacs4364]

nevermind I'm stupid,I added it to the modal-content section not in the '.modal' section,now it works!

[@vincebraca7141]

how do you run that modal.js on terminal? be cause i use npm start but i can't start it

[@ankushmalik8257]

On clicking Open button, the modal is not opening. Can anyone please suggest?

[@Teodorant1]

I downloaded the project and copied the components file and put it into my SRC file, and imported it the same way into my app.js, I couldn't get it to work. Please help!

[@surjeetsingh5821]

mine too not working

[@slamanaim1837]

thank you it is what i want to know how to create a modal that is shown when i login my bank account. it contains points that turn and text please wait before showin my bank receipt

[@worldclasscode1847]

Great video ! :)

[@worldclasscode1847]

Contact me

[@fola_azeez]

thank you so much bro bro

[@augischadiegils.5109]

❤️❤️❤️❤️

[@EminoMeneko]

Super bien expliqué mais chez moi ça ne crée pas la modale. React dev tools me permet de voir que le state toggle mais rien ne s'affiche. En fait c'est parce que je part des templates depuis le site de Bootstrap et que le code ne marche pas tout à fait de la même manière. En tout cas ça a répondu à la question que je me posais.

[@TheWebSchool]

Thanks, We speak English here :)

[@henzelsargsyan4302]

Thanks a lot!

[@PROTECHRAHUL]

how can we do it on onload

[@julien25585]

How can i fix this error: "./src/App.js Module not found: Can't resolve './Components/Modal/Modal' in 'C:\Users\user\Desktop\Test\Test\src'" i use this import: "import Modal from './Components/Modal/';"

[@TheWebSchool]

This is mainly a problem with the path, check the name of your paths

[@julien25585]

@@TheWebSchool Maybe i dont understand bcs im kinda new to do programming. I use a relative path, it should be okay then or not? Actually i have no clue how to fix this :/

[@hamidrezarahimi6651]

If your folders structure is the same as what was explained in the video, you should add the Component file to your import statement as well. With that being said, you have to update your import to: import Modal from "./Components/Modal/Modal";

[@nischithr5428]

Thank You! ☺☺

[@matiasrocca4702]

Hey!! Im having trouble with the overlay toggle on the overlay div. It is also executing the function when clicking inside the popup component (which kinda makes sense, since the component is within the overlay div). Does anybody know how may I fix this?

[@matiasrocca4702]

Im not being able to call the function only while clicking the overlay (outside part of the box), im also calling it when clicking on the inside. This is a problem, because im trying to fill a form inside the component

[@dev_catM]

Top!👍

[@GameAnimevietsub]

not working now :((

[@venkateshkumar9600]

Thank you

[@guntacaytar]

why do u say 'hoviley' insted of overlay

[@ora_ukFelix]

Source Code Please

[@Boltkiller96]

0:29 and we are going to fk us

[@ashwinumbarkar6625]

Thanks .

[@TheNarstonerz]

Sweet french accent

[@khan.hassan]

Thanks 👍

[@sandeepdhungana6657]

Great

[@mega.pe4enka147]

красава

[@guntacaytar]

there are 4 big mistakes. how dare u upload a video. u are junior level

[@guntacaytar]

what is this heavy accent. it is hard to listen . ufff so bad.

[@RaekhandiYoga]

Thank you so much