Bootstrap 3.3在模态上显示双滚动条

时间:2015-01-22 11:45:35

标签: html5 css3 twitter-bootstrap-3 modal-dialog

我正在使用Bootstrap 3.3.1模式,直到昨天才完美运行。

我在页面上使用了一些模态窗口。 其中一个模态比页面更长。在正常时间,Bootstrap透明地隐藏正文的滚动条并在叠加层上创建滚动条。当用户滚动模态时,它会在到达结尾时停止。并且身体根本没有移动。

但是,昨天,我正在研究我的模态,现在它完全是错误的。我不知道我介绍的那些破坏我的模态的东西。

首先,Bootstrap在身体上施加15px的偏移,即使在高度低于屏幕高度的小模态上也是如此。 内容无用地转移。 其次,当显示模态时,身体保持其滚动条。叠加层也有滚动条。所以,我的页面上有一个可怕的双滚动条,当用户在模态的末尾滚动时,主体也会滚动。

此外,有时候(是的),叠加层是错误的,它会与身体一起滚动(所以我可以在页面底部看到没有叠加层的身体)。

我不知道是什么原因造成了这个问题,因为它之前有效。

修改:这是我的代码:http://pastebin.com/ePAcjri8。页面中模态的位置对此错误没有影响(在<body>之后,</body>之前的juste等)。 我在显示时通过Ajax填充模态内容。 在JavaScript方面,我只是使用.modal('show')然后.html(html)来填充它们。

1 个答案:

答案 0 :(得分:3)

问题解决了。 我认为这个问题可能是由很多不同的原因引起的(请参阅Internet上有关此问题的主题,但在Bootstrap版本中已经修复了很多),但在我的情况下,我只需要在我的CSS中删除它:

html {
    overflow-x: hidden;
}

隐藏x中的y<html>溢出可能导致双滚动条的显示。