Build a Popup With JavaScript

If you have used the web anytime in the last 5 years then you have most definitely run into an abundance of popups, also known as modals, which are quickly becoming one of the most popular components in web development.
In this video I will cover how to create a simple modal that animates in on button click, and fades out when the modal is closed. This modal is also able to be closed by clicking anywhere outside the modal which is something most tutorial don't cover. Lastly, this modal is setup in a way that it is incredibly easy for you to customize it to the needs of your exact website.
📚 Materials:
Code: github.com/WebDevSimplified/V...
🧠 Concepts Covered:
- How to use transform translate to center elements
- How to show/hide elements with a button click
- Smooth open/close animation transitions
- How to style an ugly modal 😜
- CSS position fixed
- Using CSS pointer events to prevent click events
🌎 Find Me Here:
Twitter: / devsimplified
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#JavaScript #WebDevelopment #Modal

[@nikhilsharma2982]

Hi, your way of explaining the each and every details and your approach of covering every dependent elements which are being used or going to be affected in the background is simply awesome.
Thanks a lot for covering it in a speedy but with a very simplified way.

[@BMikel]

This is most comprehensive and straightforward tutorial on modals I've ever seen. What makes it unique - handling multiple modals. Most of TH-cam educators show only how singular modal works.

[@glensrb4723]

Perfect timing! Was looking for a modal solution to a login form and this is just perfect. Thanks mate! :)

[@WebDevSimplified]

Glad I could help.

[@dan1523]

Hey bro, I just wanna say that Your vids have really helped me understand some concepts that I had a hard time grasping in my bootcamp. keep up the great vids!

[@ryand640]

Seriously strong video... concise, well paced, extremely well organized and well presented . Great job!

[@f44nboy]

Nothing to add to that!

[@masterofnan2870]

Dude, you rule. I have been pulling my hair out trying to deal with other modal methods. Thank you!

[@MRAMetharam]

This content is golden! Not only is it short and direct to the point, but it also shows off a lot of very useful techniques! It is very seldom that I come across videos like this! Thanx for being awesome and sharing this!

[@timderks5960]

Kyle, your videos are a true lifesaver. I'm a pretty good coder - for a hobbyist at least, but my CSS knowledge is pretty basic. Because of this, I used to have some complex functions to handle button clicks on elements that have children, since the target of the event can be either the clickable element, or one of its children. If only I knew about pointer-events sooner, that could have saved me so much time!
There's a lot of great JS and CSS content out there, but in the last couple of years, I've always come back to your videos. Thanks for all the effort!

[@masterchief9148]

Honestly, you're my favorite dev youtuber !
Each details are explained extremely well and without search your word !

[@Fatfingertunes]

Excellent! And far more sophisticated than I would have done myself... really appreciated.

[@danbuild977]

Absolute Fire in 15 minutes. Your videos are incredible, and super easy to follow. Thank you.

[@thedesignerdeveloper8205]

Thank you for the tutorial! I just subscribed so I'll definitely be watching more of your tutorials.

[@juicifer2024]

im not joking when i say you have taught me more about web development than any college programming course did. Thank you for teaching the public in a very clear concise way.

[@bonguthandokhumalo7552]

Thanks a lot, man, your videos are always helpful. Keep up the good work.

[@jaydenmoon1165]

That was an awesome tut as always! - lol needed a refresher on this topic, thank you !

[@adamjamiu6764]

Thanks, kyle. I don't know how I will appreciate your efforts. you made me understand how I will put my javascript skills into real-world projects

[@mattmelester8929]

Another great job (as usual). Thanks.

[@greenfigure3941]

Thank you! I was looking for something like this and you helped me really much with my popup for my chrome/firefox extension. Without you, I would have skipped it completely and only used boring html headers inbedded in the site which would've looked awful and barely worked.

[@leochannel1189]

Thank you so much! You helped a lot and explained perfectly!

[@grownmancrying]

Man you rock! Thanks again for this one. Keep up the great work!

[@WebDevSimplified]

Thank you!

[@katkodes6055]

You have the best videos! So grateful

[@JacoblBroughton]

Thank you so much, man. Great, informative tutorial.

[@Aweheid]

Wow! your way of teaching is amazing! it's straightforward, explains everything directly in short words, is well presented, prepared, and very very clean and organized. Thanks, many many thanks.

[@xylesx]

Love this! Thank you for this. ;) Learned a bunch.

[@WebDevSimplified]

Thank you. I'm glad you enjoyed it.

[@abhirammadhu2973]

This is so perfect and well explained. All the modal popups that I have check, they make it over complicated.

[@shvideo1]

A great behaving modal and great technique as well. Great job. Thank you.

[@dannyezechukwu1175]

Great video. This helped me a ton! This channel is awesome!

[@twoonswig3667]

I've just gone mental trying to do this using stack, gpt and other videos. Gonna have some trouble with databases trying to get the modal to reflect the information relevant to which image was clicked but hopefully a bit of python can sort it out. You're such a good creator, 10 stars

[@lukabubnjevic5126]

exactly what i was looking for!

[@sarvij9870]

You are the best, awesome explanation, step by step , ty

[@MYount]

the official Kyle pop up. I got so much from this video thanks. I love the way you popped up in the beginning. lol

[@oscarleon3008]

Just what I need, perfect!

[@alexjulius69]

Yes! This is precisely what I need for my software, thanks

[@sanjaymahto5825]

You are justifying the name of this channel. thanks 🙏

[@stratokrat6290]

High quality content. Well done and thank you!

[@WebDevSimplified]

Thabk you. I'm glad you enjoyed it.

[@roanmaravillo9895]

Thanks kyle you really helped me on my project looking for a carousel tutorial in the future.

[@thmasibsirinzad3693]

Thank you for sharing this code. i have been searching modal pop code for a long time, finally i found what i wanted

[@WebDevSimplified]

I'm glad I could help!

[@gindevgin9298]

i really love your contents! thanks!

[@ismailmunyentwari3752]

Thank you bro 👊....
I was wondering the way I will create my own modal without
Bootstrap.
But now you turned me to it .

[@oteror]

Great tutorial! Easy to follow.

[@Ai4698]

I tried it by myself at first but yours looks so much better. Also never heard of data-* until this video

[@alanrobbo6980]

This is Fantastic, Thank You.👍

[@markroyacebuche9829]

thank you for this tutorial it really helps

[@pixelum2023]

Very interesting! I'll definitely incorporate that into some of my projects!

[@DejanPavlovic-tu8vj]

Thank you so much,so much i learned from this video.. Thank you again! Hope one day ill make this easy like you... Thanks !!!!

[@juangabriel2559]

Great video bro, thank you!

[@naie_1001]

you are a lifesaver, thank you so much!!

[@ben8140]

Great tutorial!

[@cronopios20]

Awesome! Thank you

[@SH-lt2iv]

Very good tutorial learned alot thanks!

[@bonganimkhaliphi8695]

Excellent Tut. Enjoyed it very much

[@gagiknavasatariyan7316]

It is really helped me. Great work

[@pascalgoldmann6429]

Thank u my friend! Very Strong tutorial

[@jjwebb15]

Came here for the modal turotial, left with a lorem shortcut. Gotta love it!

[@PiotrSygutPL]

Great job - thanks 👍

[@MickenCZProfi]

Thanks, this is very helpful and simple to understand. A lot of the code can be avoided if you are triggering the popup on some event and not a button (in my case when you lose in the game).

[@MASHOfficial]

lovely video, helped me a lot

[@win_ini]

7.8 billion people should be subscribed to you

[@wickedgabrugamer]

love your explanation man..

[@ahndeux]

Holy moley. That is a lot of work to create a modal.

[@latinwarrior01]

Excellent code sample and explanation! Thanks for putting this video together. I will subscribe to your channel.

[@lazarzbiljic4903]

OMG... you save my life bro, tnx!

[@red1io]

great tuto. thank you

[@gifbfbvhvhdhfhfjffjfnfhfb515]

bes tutorial ive ever seen and you show the code when youve done . ill give you a cheeky sub

[@nasirsheikh1434]

Awesome. Thank you

[@codedropsjs9633]

that is what I was looking for

[@failking888]

mAAAAn, thx I'm making the project and had some troubles and ur video solved it, big thx u)))

[@michi19935]

Thanks so much!

[@jivanmainali1742]

Bro pointer-event :none does make everything insensitive to touch or click event but when you use this property it is able to click a button and if we use z-index instead of event-pointer then still button is non clickable .why?

[@romuloalves9349]

Ótimo vídeo era oque eu estava precisando obrigado.

[@jamespawson6045]

Great video! It's what I needed, thanks - just a quick translation if he needed it.

[@siddarthkotthur1558]

bro u deserver million more subscribers!

[@daalwada]

You can build bootstrap v6.0 alone.. popup, accordions, this and that.. and you have no idea how much knowledge you have man! 😄

[@patrickmarschke2901]

Thanks so much for this! Very clear :)
Any suggestions on how to have the content inside the modal be pulled from somewhere besides the HTML upon a click event? Like a dynamically loaded footnote (or something like that).

[@silverbell6160]

Wow! I looked for something like this all afternoon. I have some modals that i need to close programatically ! All i found was jquery options. I wanted to use vanilla js. Thank u! Well explained, to the point.. great ⭐⭐⭐⭐⭐

[@israelthewhite4863]

Thanks, you are the best

[@JorgeRivera-rp1zw]

tHANKS TO SHARE THIS VIDEO WAS AWESOME..!
AND VERY USEFULL..! PLEASE DO IT MORE...! SUCCEEDS..!

[@CarlosSilva-uj6un]

thank you very much!

[@backToFreedom]

Perfect!

[@GavinWoodthebarbarian]

this is awesome, exactly what I was looking for. I do have a question though, if I have a button inside the modal that triggers another modal (so the white section replaces each other - Bootstrap uses the data-dismiss data-toggle) but the overly stays. how do I go about this?

[@0119325]

If we create two modal buttons the functions does respond to eachone so that's the purpose of selector forEach?

[@user-se6ct5zu2f]

thank you so much!!!

[@V.Z.69]

Pretty good. It just drives me crazy that you didn't use a single semicolon in JS.

[@foxjonesofficial]

I don’t use semicolons😊

[@abhilashLeader_07]

I use but it is not mandatory....i dont know y 🤣🤣🤣

[@viktorshatalov1920]

Очень классно и понятно!!!спасибо. Cool!!! thank you

[@jaymishra7560]

Great Describing !

[@bikramchettri9405]

Thanks mate. Your tutorials are precious. If you can do a video on throttling and debounce it will be very helpful.

[@WebDevSimplified]

I'm really glad my videos help. Debounce is a fairly technical and advanced topic, which I generally believe is done better through text. That said, I will look into seeing if I can figure out a good way to teach that concept through video.

[@bikramchettri9405]

@@WebDevSimplified Thanks for the reply.

[@UwU-dx5hu]

Thank you so so so much

[@ileska7828]

Thank you so much sir

[@philipweidmann4262]

good one!

[@robertoenriquechavezrodrig731]

Thanks bro you're a badass :)

[@hd51547885]

Really Good

[@shazbaz5695]

Hi, just wondering do you have to have the modal on the same page as the button? What if you want a navigation bar across different pages and one reusable login/register form modal and not copy and paste the modal on every page...how would you get around that?

[@aram5642]

The modal dialogs are complex matter on various levels (template abstraction, vertical scrolling, responsiveness, focus, tabindex, etc), but this tutorial is a good starting point. Never ever though remove css outlines from focusable elements - for the sake of accessibility.

[@user-rt4gn7rh5s]

Thanks a lot

[@detoxfi5926]

Thank you for the great video. can you make a video explaining how to get those pop-up triggers such as time and intent to exit

[@buzzyso]

THANK YOU

[@okoliginikachukwu6036]

Pretty straightforward and beginner friendly. Great job!
Only issue I'm having is that the modal is triggered on page load instead of on button click. Pls what should I do

[@aufantaufiqurrahman2794]

alhamdulillah, thank u very much!

[@kurtcamarines9481]

Any clue how to loop through all the other button and close the active ones before opening a new one?

[@KeeveSinger]

Awesome explanations! Quick question. What is the 'live server' you were referring to? How can I use it?

[@yugeshkk3062]

Thank you