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: https://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: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#JavaScript #WebDevelopment #Modal