Love this thank you! The only thing that would great if I was able to stop the page from scrolling while the Modal is open... do you already have a video for this?
I don't think I have a video on that at the moment but you can do it by toggling overflow: hidden on the body. I actually do it in this video for a preloader animation: ruclips.net/video/G0UTvnPS3aw/видео.htmlsi=LsMdapTQtE0J2vzF Finsweet also has an attributes solution to do it!
Hi. Really nice tutorial. What if I have more than form on a page, how can we avoid duplicating code for that. let’s say, my modal wrapper slides from right, and only the form content changes based on a button clicked. Thanks a lot!
Hey Elchin I’m not sure I understand the application 100% but my initial thought would be to use data attributes for the various forms and query the element based on that (instead of ID which has to be unique). Use querySelectorAll which will give you a NodeList and then loop through each form and execute the logic for your individual forms in there.
WOW. Thank you so much for explaining this code world for modal accessibility. I'd appreciate your input if you can help out, for a pop-up that appears after page load finishes, from its hidden state to flex display state. No 'open button' click/button is in the process. However, the rest is the same. What do I need to adjust/remove in the code to let the focus state be inside the pop up when it does appear?
hi thank you for this and your previous video, it was 100% extremely helpful, however, the current problem I have with the popup modal, has to do with responsiveness across different screens especially mobile, as they just do not fit in well any help would be appreciated in making the modals responsive
Hey Bae - any advice on how to control the open / close animation using this modal? Also - what if I want two different buttons on the ame page to open the same modal - can I copy the code and change btn to btn1?
You could animate it by not using a class toggle strategy but instead use javascript. You could probably do it one of many ways: - Webflow Interactions - Vanilla JS (access the Elment.style property) - GSAP
Thank you. This was awesome!
Love this thank you!
The only thing that would great if I was able to stop the page from scrolling while the Modal is open... do you already have a video for this?
I don't think I have a video on that at the moment but you can do it by toggling overflow: hidden on the body.
I actually do it in this video for a preloader animation: ruclips.net/video/G0UTvnPS3aw/видео.htmlsi=LsMdapTQtE0J2vzF
Finsweet also has an attributes solution to do it!
@@webbae Thank you!
It's actually not working... I hope you can help :)
Hi. Really nice tutorial. What if I have more than form on a page, how can we avoid duplicating code for that. let’s say, my modal wrapper slides from right, and only the form content changes based on a button clicked. Thanks a lot!
Hey Elchin I’m not sure I understand the application 100% but my initial thought would be to use data attributes for the various forms and query the element based on that (instead of ID which has to be unique). Use querySelectorAll which will give you a NodeList and then loop through each form and execute the logic for your individual forms in there.
WOW. Thank you so much for explaining this code world for modal accessibility. I'd appreciate your input if you can help out, for a pop-up that appears after page load finishes, from its hidden state to flex display state. No 'open button' click/button is in the process. However, the rest is the same. What do I need to adjust/remove in the code to let the focus state be inside the pop up when it does appear?
I'd change the event listener from button click to page load and then have a setTimeout function in there somewhere. Hope that helps!
@@webbae Ohh makes sense. lol. Thanx for the tip, I'll give a go
hi thank you for this and your previous video, it was 100% extremely helpful,
however, the current problem I have with the popup modal, has to do with responsiveness across different screens especially mobile, as they just do not fit in well
any help would be appreciated in making the modals responsive
feel free to hop in the discord and ask in the questions channel. I need links to your project in order to help.
Hey Bae - any advice on how to control the open / close animation using this modal? Also - what if I want two different buttons on the ame page to open the same modal - can I copy the code and change btn to btn1?
You could animate it by not using a class toggle strategy but instead use javascript.
You could probably do it one of many ways:
- Webflow Interactions
- Vanilla JS (access the Elment.style property)
- GSAP