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:

🧠 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:

#JavaScript #WebDevelopment #Modal

[Uncaught_in_promise]

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

[nikhilsharma]

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.

[juicifer]

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.

[ryand]

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

[glensrb]

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

[jjwebb]

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

[timderks]

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!

[twoonswig]

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

[masterofnan]

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

[shamana-om]

Thank you for this great tutorial! I've been looking for a video like this for a long time already and had many uneffective attempts to build a modal on my website. With this tutorial it now all makes perfect sense and the modal perfectly works! Thank you!!

[dan]

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!

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

[danbuild]

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

[Fatfingertunes]

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

[masterchief]

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

[abhirammadhu]

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

[sanjaymahto]

You are justifying the name of this channel. thanks 🙏

[Ai]

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

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

[adamjamiu]

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