HOW TO: make custom pop up modals in Webflow the easy way

Build your fundamentals in Webflow by learning how to create a custom pop up modal! Links to everything in the description! Help us teach more people by leaving us a like and a comment.

This method of making a pop up modal in Webflow uses the built in interactions. they key parts of the build are that your modal is set to fixed so that it will be in the same spot no matter the scroll position and the z index places it over top of everything else. To make it work we are going to set the contact button as a trigger for the animation and change it from display: none, to display:block. When the pop up is visible we can use opacity to smooth the transition. Same thing in reverse to hide the pop up but set the trigger as the close icon.

Say hello!
Instagram   / anansi_creative  
Facebook   / anansicreativecanada  
https://www.anansicreative.com/

Tools used for this project
https://webflow.com/