Pop-up modal doesn't appear on mobile view

Design help General
1

Hi all!

I have a modal pop-up question regarding my site: http://tanadewa.webflow.io/
Or https://preview.webflow.com/preview/tanadewa?preview=f5dc287c204e78a5ac33bd0ea4ab8b9d

I implemented a modal pop-up using thesergie’s tutorial: [Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | 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?

2

Hi @Clarinta, thanks a lot for the post. I took a peek at the site and I have something for you to try:

  1. 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:

    $(document).ready(function() {
    $(‘.modal-button’)
    .css(‘cursor’, ‘pointer’)
    .click(function(e) {
    e.preventDefault();
    $(‘.modal-background’).fadeIn();
    });
    $(‘.modal-window’).click(function(e) {
    e.preventDefault();
    $(‘.modal-background’).fadeOut();
    });
    });

After updating this custom code, save changes and go into Design mode.

  1. Select the Modal Background and go to mobile landscape view, and set the top margin to 0px

762×810 44.5 KB

  1. 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):

896×846 51.4 KB

  1. Select the Modal Window, switch to mobile landscape view and remove the position style override, so that it uses the default Auto position:

646×736 46.3 KB

After changing the styles, republish the site and test on your mobile device.

Let me know how it goes !

3

Hi dave,

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?

4

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:

  1. 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 !

5

Thank you so much for all the help Dave! It’s working now :smile:

1 Like
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.