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
On this page of the site you can watch the video online Build a Popup With JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Web Dev Simplified 20 April 2019, share the link with friends and acquaintances, this video has already been watched 387,983 times on youtube and it was liked by 8 thousand viewers. Enjoy your viewing!