我在一个单页的网站上使用twitter bootstrap模态。当我点击按钮打开模态时,背景会跳到页面的顶部并打开模态。当你点击模态内部的关闭按钮时也会发生同样的事情。
我试着将下面的代码添加到我的CSS文件中。这阻止了背景跳到顶部,但是,我现在可以在打开模态的情况下滚动背景,这也是我不想看到的。而且当我的模态溢出时,我可以同时看到模态和背景的滚动条。
body.modal-open {
overflow: visible;
}
有没有其他方法可以解决这个跳转问题,而不允许用户在模态打开时滚动背景?
7条答案
按热度按时间dohp0rv51#
如果将
body
或html
的height
设置为100%
(如我的示例),请将以下内容添加到CSS文件中:背景现在应保持其原始位置。
qeeaahzv2#
如果这对任何人都有帮助,下面的CSS解决了这个问题:
第一个块允许显示页面滚动条,并防止在打开模态时跳转到顶部。第二个块阻止模态溢出,添加自己的第二个滚动条。
olmpazwi3#
在css中添加以下类:
当modal打开时将其添加到body标记,当modal关闭时将其删除。
p4tfgftt4#
因为我也为这个问题纠结了好几天,所以我的解决方案很简单--我摆弄了HTML,发现当modal关闭时,modal-background导致了这个问题。所以我简单地从CSS中注解掉了这个问题,现在一切都好了。使用浏览器检查器来处理类似的问题!
rjjhvcjd5#
这是因为modal-open是一个添加到body的类,当modal打开时。确保它的位置不固定,如果它是固定的,让它继承,这将帮助你在弹出窗口打开时停留在同一个位置
dy2hfwbg6#
您可以使用以下代码,它应该可以正常工作:
将上面的ID分配给任何按钮或链接,您的模型应该可以正常加载,没有任何问题。
eqoofvh97#
我遇到了同样的问题,删除
href="#"
解决了这个问题。