模态窗口导致父页面正文滚动到顶部

Question

我购买了一个主题，并且正在使用模式窗口功能。 有一个按钮，单击该按钮会打开模式窗口。 编码为：-

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#largeModal">
Launch Large Modal
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>
         <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

您可以在此处测试主题预览： -https : //preview.oklerthemes.com/porto/7.2.0/elements-modals.html

在页面中向下滚动，然后单击“启动大型模态”。 您会看到在打开和关闭模式窗口时父页面主体停留在原处

我在网站上使用了完全相同的代码，即： -http : //mdscomputers.ae/new/solutions.php

请向下滚动，您将看到test1，test2和test3

对于test1，您必须单击单词test1以打开模式窗口。 当模式窗口打开时，页面主体将滚动到顶部。 当您单击关闭时，父页面主体将停留在顶部

对于test2，您必须单击框中的任意位置以打开模式窗口。 发生与test1相同的问题

对于test3，您必须单击Launch Large Modal按钮。 父页面主体将滚动到顶部，但是当我关闭模式窗口时，父页面主体将向下滚动到该框

这让我发疯了:(为什么父页面正文对我来说滚动到顶部，为什么它只在test3中向下滚动而不在test1和test2中向下滚动？

打开模式窗口时，我需要禁止父页面主体滚动到顶部

Answer 1

去掉

.modal-open {
     overflow: hidden; 
}

从modal.css第9行

Answer 2

当模态打开时，类modal-open将添加到body元素。

在_modal.scss ，样式.modal-open { overflow: hidden; } .modal-open { overflow: hidden; }删除body元素的滚动条。 卸下机身上的滚动条将滚动条推到顶部。

编辑：

custom.css下行添加到您的custom.css ：

.modal-open {
    overflow: initial;
}

Answer 3

对我来说，所有模态都会导致页面向上滚动。 这是因为在打开模态时，将.modal-open类添加到body 。 此类增加了overflow: hidden; 到身体。 删除此行或设置为overflow: unset;

这将停止自动滚动到顶部，但是即使模式已打开，也可以滚动。