时间戳

首页 > 解决方案 > 模态窗口导致父页面正文滚动到顶部

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

问题描述

我买了一个主题，我正在使用模态窗口功能。有一个按钮，当它被点击时，模态窗口打开。编码是： -

<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 中滚动？

当模式窗口打开时，我需要禁用父页面正文滚动到顶部

标签： javascripthtmlcss

解决方案

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

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

编辑：

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

.modal-open {
    overflow: initial;
}

推荐阅读