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.
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?
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
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.
@@webbae I can copy/paste HTML nodes within same project but I was not able to copy form one project to another. Therefore I had to manually recreate everything. It would be so cool if I could simply copy/paste what you built ;). Maybe I also do not kno what "cloneable" is ;)
you could load diff videos in the same modal with JS based on which button is clicked but you could also just create a modal for each one and link the interaction to the class - that's probably what I'd do!
@@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
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!
Extremely helpful, thanks. Love how you simplified a seemingly convoluted subject.
Thanks Jon.
Love the consistent digestible content. And also the gif pop ups
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!
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.
So helpful, thanks!
Great tutorial got me to make exactly what I needed-thank you :)
Glad it helped!
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
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.
Is it possible to copy/paste this into my project or I have to redo what you have done?
copy/paste should work from the cloneable. let me know if it doesn't work for you.
@@webbae I can copy/paste HTML nodes within same project but I was not able to copy form one project to another. Therefore I had to manually recreate everything. It would be so cool if I could simply copy/paste what you built ;).
Maybe I also do not kno what "cloneable" is ;)
Thank you. Awesome content.
This was awesome, thank you!!!
Glad it was helpful!
Can such a modal be reused? I want to have multiple links, each link should open different video within the modal.
you could load diff videos in the same modal with JS based on which button is clicked but you could also just create a modal for each one and link the interaction to the class - that's probably what I'd do!
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
Why did you make + and not just immediately X instead?
the rotated plus sign looks better than X :)
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
@@nicholasmoreno9489 I have the same issue, it works only on the page modal was created :( Do you have any idea how to fix it?
Love this
Thank you Viet.
i am unable to close the form with the interaction taught ;(
feel free to share a preview link in Discord for extra help!