Avada WP 主题/Bootstrap Modals 导致页面在移动设备上滚动到顶部

Question

Using Avada theme and not sure what version of Bootstrap they have integrated, but on mobile when I open a modal it scrolls the page to the top. I've tried a few solutions from the wild, but none have worked so far.

Answer 1

I just experienced the same issue on Avada 5.5.2. Here is the exact question my coworker emailed me this morning.

I'm working on the *******.com website. The modal windows work as they should on desktop. However on mobile, when a modal link is clicked the modal window pops up just fine, but it also scrolls the page back to top. Avada includes a # in the href line when using these bootstrap functions, and won't let me remove it.

So, here's what I tried, without success: ....

After going in a lot of incorrect directions, the solution that worked for me was one simple css tweak. Add the code below labeled "solution" to your child theme, or directly into your Avada Options as done in the screenshot.

fusion-10.min.css

The style sheet fusion builder creates is forcing fixed positioning.

.ua-mobile .modal-open {
    position: fixed;
    overflow: hidden;
}

Solution

Override the fusion style sheet as such.

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

Answer 2

很棒-这对我有用:-)谢谢>