Build a Popup With JavaScript
Web Dev Simplified
@webdevsimplifiedAbout
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers. I started Web Dev Simplified in order to share my passion for web development, and do what I truly love. Teach and inspire new web developers. I have been in love with full stack web development since 2015 when I did my first internship as a web developer. Ever since then I have pursued my passion, learning everything there is to know about web development. Over the years I have taught many colleagues and friends the joys of web development, and cannot wait to teach you. Thank you for watching!
Latest Posts
Video Description
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
You May Also Like
Boost Your Web Dev Setup
AI-recommended products based on this video
Small Standing Desk Adjustable Height, Mobile Stand Up Desk with Wheels, 32 Inch Portable Rolling Desks for Walking Pad Treadmill Wood Rustic
ERGOMAKER 55-inch Electric Standing Desk, Adjustable Height Stand Desk, Sit Stand Desk with Computer Workstation, Rustic Brown
BEXEVUE Standing Desk, Height Adjustable Electric Desk, 48 x 24 Inches Adjustable Desk, Small Computer Home Office Desk with Splice Board (White)
