如何在模态切换中阻止背景跳到顶部答案

【问题标题】：How to stop background from jumping to the top on modal toggle如何在模态切换中阻止背景跳到顶部
【发布时间】：2017-01-05 09:33:57
【问题描述】：

我在单页浏览器网站上使用 twitter 引导模式。当我点击按钮打开模态时，背景跳转到页面顶部并打开模态。当您单击模态框内的关闭按钮时，也会发生同样的事情。

我尝试将以下代码添加到我的 CSS 文件中。这会阻止背景跳到顶部，但是，我现在可以滚动背景并打开我不想要的模式。而且当我的模态溢出时，我可以看到模态和背景的滚动条。

body.modal-open {
    overflow: visible;
}

有没有另一种方法来解决这个跳跃问题，而不让用户在打开模式时滚动背景？

【问题讨论】：

【解决方案1】：

我遇到了同样的问题，删除 href="#" 解决了它。

【讨论】：

【解决方案2】：

如果这对任何人都有帮助，那么下面的 CSS 解决了这个问题：

body.modal-open {
  position: inherit;
  overflow: visible;
}

body.modal-open .modal {
  overflow: hidden;
}

第一个块允许显示页面滚动条并防止在打开模式时跳转到顶部。第二个块停止模态溢出添加它自己的第二个滚动条。

【讨论】：

【解决方案3】：

由于我也为这个问题苦苦挣扎了好几天，我的解决方案很简单 - 我使用 HTML 并发现当模式关闭时 .modal-backdrop 导致了问题。所以我只是从我的 CSS 中注释掉了这个，现在一切都很好。使用浏览器检查器解决此类问题！

//.modal-backdrop + #app-wrapper {
    //overflow: hidden;
//}

【讨论】：

【解决方案4】：

如果您将body 或html 的height 设置为100%，就像我的情况一样，请将以下内容添加到您的CSS 文件中：

html, body {
    overflow: scroll;
}

背景现在应该保持原来的位置。

【讨论】：

【解决方案5】：

您可以使用以下代码，它应该可以正常工作：

<div class="modal" id="modelId" role="dialog" aria-hidden="true" data-backdrop="true">
  <!--Model code -->
</div>

将上述 id 分配给任何按钮或链接，您的模型应该可以正常加载，没有任何问题。

【讨论】：

【解决方案6】：

在 css 中添加以下类：

.modal-opned {
  overflow-y:hidden;
}

当modal打开时添加到body标签，当modal关闭时移除。

【讨论】：

根据这个问题的公认答案here，那个课程就是问题所在。因此添加类 .modal-open {overflow: visible;} 解决了这个问题。在我的情况下，添加类解决了跳跃问题，但现在使用滚动条创建了另一个类，因为当我的模态溢出时，我现在可以看到 2 个滚动条。而且我还可以在打开模式的情况下滚动背景。添加您建议的课程无效。