javascript - 模态窗口导致父页面主体滚动到顶部

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

在页面中向下滚动，然后单击“Launch Large Modal”。你会看到父页面主体停留在模态窗口打开和关闭时的位置

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

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

对于 test1，您必须单击单词 test1 才能打开模态窗口。当模态窗口打开时，页面正文滚动到顶部。当您单击关闭时，父页面正文保持在顶部

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

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

这让我抓狂 :( 为什么父页面主体为我滚动到顶部，为什么它只在 test3 而不是在 test1 和 test2 中向下滚动？

我需要在模态窗口打开时禁止父页面正文滚动到顶部

Answer 1

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

在_modal.scss中，样式.modal-open { overflow: hidden; } 移除 body 元素的滚动条。移除主体上的滚动条会强制滚动到顶部。

编辑:

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

.modal-open {
    overflow: initial;
}