如何阻止背景在模态切换上跳到顶部

Question

我在一个寻呼机网站上使用twitter bootstrap模式。当我单击按钮打开模态时，背景跳转到页面顶部并打开模态。单击模态内的关闭按钮时会发生同样的事情。

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

body.modal-open {
    overflow: visible;
}

有没有其他方法可以解决这个跳跃问题，而不会让用户在模态打开时滚动背景？

Answer 1

在css中添加以下类：

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

打开模态时将其添加到body标签中，并在模态关闭时将其删除。

Answer 2

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

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

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

Answer 3

如果您height或body的{​​{1}}设置为html，请将以下内容添加到您的CSS文件中：

100%

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

Answer 4

由于我也为这个问题苦苦挣扎了几天，所以我的解决方案很简单-我玩过HTML，发现模态关闭时.modal-backdrop引起了问题。因此，我只是从CSS中对此进行了注释，现在一切都很好。使用您的浏览器检查器来解决此类问题！

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

Answer 5

在这种情况下，如果这可以帮助任何人，则以下CSS解决了该问题：

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

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

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

Answer 6

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