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/Vanilla-JavaScript-Modal
🧠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: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
#JavaScript #WebDevelopment #Modal
