Avada Forums Community Forum Prevent Scrolling when launching modal

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • DaveWatson
    Participant
    Post count: 2

    Hi there, I am trying to prevent scrolling of the underlying page when a modal is triggered on mobile.

    On desktop, this seems to work fine, and the page stays in the same place, however on mobile – the underlying page always jumps to the top of page.

    I’ve seen this : https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened

    but it doesn’t seem to work for me.

    Any help is appreciated.

    Thanks,
    -Dave

    Sky-Life
    Participant
    Post count: 12

    Hi there, I´ve been trying to find out as well. I´ve the same problem…
    So far no luck…

    marklchaves
    Participant
    Post count: 873

    Hi Dave and @sky-life,

    I don’t think the Stack Overflow threads on this subject are helpful for our case. They seem pretty specific to Bootstrap.

    The automatic/unwanted scroll to the top of the page when a modal is closed is an interesting problem. It’s bugged me for a while. Your posts inspired me to finally tackle it.

    Caveat

    I’m only going to address the automatic scroll to the top of the page. There are definitely ways to stop the page underneath the modal from scrolling completely. But, disabling scrolling will be out of scope for this reply.

    First, I used this article as a starting point.

    https://css-tricks.com/considerations-styling-modal/

    I forked the CodePen from this article so I could create a reprex (min reproducible example) of our problem. Here’s the result.

    https://codepen.io/marklchaves/pen/bGGEPZB

    And, it works perfectly on my iPhone. I.e., no punting to the top when opening/closing the modal. You’ll notice that this solution requires JavaScript. But, the JavaScript is minimal (10-12 lines of code). The CSS is heaftier, but manageable.

    Finally, I refactored my working pen into my About page in Avada. See the “what’s with the key?” link.

    https://marklchaves.com/about/

    It works like a charm (insert happy sigh here). Finally. No auto scroll to the top when you click my modal on my about page. And now, I can disable Fusion Builder Modal elements from my site. An added bonus. Yay!

    Feel free to fork my pen and inspect the code for my about page. I’ll write all this up in a blog post at some point.

    Shout, if you have any questions.

    Share & enjoy!

    jjohn125
    Participant
    Post count: 1

    It’s a very easy fix. Add this line of custom CSS:

    .ua-mobile .modal-open {
    position: relative;
    }

    Bryan
    Participant
    Post count: 5

    Thank you John this helped me. 🙂

    Hassaan.ahmed
    Participant
    Post count: 1

    Thank you John, this was the solution I was looking for and it worked perfectly!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.