Simple Popup Modal in Webflow in 9 Minutes
HTML-код
- Опубликовано: 11 июл 2024
- Here's how to make a solid modal in Webflow simply. Closes on background click AND close button. Also has a light animation you could improve upon. Unfortunately, it's not very accessible, but we'll take a look at some improvement in the next video!
// CLONE IT
👉 webflow.grsm.io/cloneable-is-...
// MORE RESOURCES
🌶 Improved Modal: • Better Popup Modal Acc...
💪 My ULTIMATE Webflow Resource Library: code-snippets-sign-up.webflow...
What’s in it?
- All the Javascript from my videos
- Template GSAP code for award-wining text animations
- My FULL website pre-launch checklist to maximize that Lighthouse score
- Custom CSS Snippets that I end up using on almost every project, including selection highlight color, textarea resize, and custom slider dots.
- Advanced CSS snippets like pulse animations and outline text stroke
- Instructions on how to use it all
🐥 Follow Me! / webisbae
🎧 I sleep with the headset on. Get yours: amzn.to/3BTd3vb
🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶
↘️ ↘️ ↘️ Don't make me get a real job ↙️ ↙️ ↙️
/ webbae
↗️ ↗️ ↗️ Support your friendly Webflow creator ↖️ ↖️ ↖️
🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶 🌶
00:00 Intro
00:15 Modal build
04:15 Interaction
06:19 Animate it
08:30 Accessibility Problems with this modal 
Хобби
Love the consistent digestible content. And also the gif pop ups
Thank you. Awesome content.
Extremely helpful, thanks. Love how you simplified a seemingly convoluted subject.
Thanks Jon.
Love the video but the best part of it all is the name of your channel
Incredible, you and Ricks are life savers
glad it could help!
This was awesome, thank you!!!
Glad it was helpful!
Great tutorial got me to make exactly what I needed-thank you :)
Glad it helped!
Love this
Thank you Viet.
This was exactly what I needed! - You click around really fast, if you could slow down just a tad while explaining that would be extreamly helpful. I put you on slow speed and that helped!
I'll try to slow down! You're not the first person to say that so my apologies. I get nervous when recording and it results in me speaking faster and trying to get to the end of the video lol.
All good! Thanks for your hard work in putting these together!
Thanks. Wondeful quick (I needed to pause-replay several time 😉 - which I'd rather do the suffer thru too much verbage) example!
Thanks Karl! Glad you liked it. Be sure to check out the improved modal video and/or finsweet accessible modal component as well
Hey there! Thanks so much for the video, I followed it step by step and it worked! I created a much larger modal (intentionally) than the one you developed in this video and I have seemed to have encountered a problem. Although on my desktop when I resize the viewport everything seems to work fine, but when I look at the published website on my mac laptop the modal is larger than the screen itself, and I can't even click on the x to get out of the modal because its so large the x is not visible! Any idea what I could have done wrong or how to fix it?
Probably something with positioning and/or width - feel free to post a link in discord and I’ll see if I can help further.
Thanks for posting this! but as a non-developer and designer, I really struggled to go in step with the speed of your tutorial! Had to reduce the playback speed to understand some sections. Please slow down and maybe highlight the sections you're on as and when you're making a change. Also can you PLEAAASE post a tutorial on how you created that open modal on which the interactions are happening?Thanks!
Hey Namaratha thank you for the feedback I’ll add the tutorial idea to the list. I actually cover how to use finsweet to make accessible modals in my Webflow 201 course as well - you might find it interesting.
Any idea if there's a way to disable scrolling on the body (not modal) using default/native webflow features?
I don't think you can do this with Webflow IX2. Most common way I see is adding an "overflow-hidden" class to the body tag on modal open, which requires some JS.
You may be able to do it somehow with the :has selector, but I haven't tried.
@@webbae Got it - more I think about it, being able to scroll is fairly expected behavior- thank you Web Bae. You’ve been a great follow for me for the last year or two
i am unable to close the form with the interaction taught ;(
feel free to share a preview link in Discord for extra help!
why does the modal only work when that page is the first page opened
are you doing a page load animation? click?
@@webbae the issue i have is when i preview the website from the home page and navigate to the page where the modal was created it doesnt seem to work. but when i preview from the page where i created the modal it functions correctly