javascript - Avada WP ThemeBootstrap Modals Cause Page to Scroll to Top on Mobile - Stack Overflow

admin管理员组

文章数量:1395436

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.

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.

• javascript
• wordpress
• twitter-bootstrap

Share Improve this question Follow edited Jun 15, 2018 at 4:01 wazz 5,08855 gold badges2222 silver badges3636 bronze badges asked Jun 1, 2018 at 15:10 NotaGuruAtAllNotaGuruAtAll 53388 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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 *******. 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;
}

本文标签： javascriptAvada WP ThemeBootstrap Modals Cause Page to Scroll to Top on MobileStack Overflow