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; }删除了body元素的滚动条。移除主体上的滚动条将迫使滚动到顶部。

编辑：

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

.modal-open {
    overflow: initial;
}

Answer 3

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

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

模式窗口使父页面正文滚动到顶部

3 个答案: