I have a modal pop-up question regarding my site: http://tanadewa.webflow.io/
I implemented a modal pop-up using thesergie’s tutorial: [Tutorial] How to create a modal/pop-up in Webflow
The pop-up works perfectly on desktop and tablet. However, the modal doesn’t appear at all on the portrait version of mobile, which I click on the button “Why Book Direct” And on the mobile landscape version, the the pop-up is cut off (this is hard to explain, you’d have to visit the website’s webflow.io link on your mobile).
Does anyone know how to solve this problem?
Hi @Clarinta, thanks a lot for the post. I took a peek at the site and I have something for you to try:
Change the code that you are using in custom code, so that the class that triggers the modal, is named modal-button instead of modal-button-div:
After updating this custom code, save changes and go into Design mode.
- Select the Modal Background and go to mobile landscape view, and set the top margin to 0px
- With the Modal Background still selected, go to Mobile Portrait view, and remove the position override so that the styles are inherited (in orange color):
- Select the Modal Window, switch to mobile landscape view and remove the position style override, so that it uses the default Auto position:
After changing the styles, republish the site and test on your mobile device.
Let me know how it goes !
Thanks again for your super helpful response! I did the steps you mentioned.
The mobile portrait version works fine now.
However, the mobile landscape version is still being cut off. Basically, the problem is that I can’t scroll to see the rest of the pop-up window. When I try to scroll, only the website in the background scrolls down - but the modal pop-up stays static. Is there a way to be able to scroll down so users can read the entire pop-up content?
Hi @Clarinta ! Thanks for the followup, I see what you are talking about. Some additional code and style changes are needed, hopefully the steps below will help:
Replace the code that opens the modal with the code below:
The change to the code is the extra lines to set the body from overflow visible to overflow hidden when the button is clicked.
Now a few extra changes and checkings on the Modal Background and Modal Window classes.
I hope that helps !
Thank you so much for all the help Dave! It’s working now
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.