【问题标题】:Twitter Bootstrap: Prevent Body from scrolling when a modal is openedTwitter Bootstrap:在打开模式时防止正文滚动
【发布时间】:2013-04-26 16:59:19
【问题描述】:

我遇到的问题是,当打开模式时,背景主体可以使用鼠标滚轮滚动。 似乎这个问题是已知的,人们建议将正文设置为溢出:隐藏,如此链接中所述: Prevent BODY from scrolling when a modal is opened 如果您的页面很短并且模态链接位于初始可见页面上,则效果很好。但是,如果您的页面较长,并且必须向下滚动才能看到模态链接,则一旦单击打开模态,背景主体就会移到顶部。

背景不再滚动,这是我想要的,但是有什么办法可以防止它在打开模式时弹回顶部?当您需要使用模态添加多个条目并且必须继续向下滚动以单击模态链接以添加另一个项目时,这很不方便。

【问题讨论】:

标签: javascript jquery css twitter-bootstrap modal-dialog


【解决方案1】:

在你的onclick(我猜你使用onclick)事件方法的末尾插入一个return false;,这将阻止网站滚动到顶部。

【讨论】:

  • Twitter Bootstrap 自动处理所有用于模态的 javascript。我们所要做的就是在链接的 href 中添加一个 data-toggle="modal" 和模态引用。有没有其他办法?
  • 我的另一个想法是您发布案例的来源或链接
  • 它帮助了我。我使用点击打开模式窗口。
【解决方案2】:

我遇到了类似的问题,其中大于窗口的模态框被截断,并且在任何地方滚动都会滚动背景而不是模态框。

This 问题将我指向this 插件,该插件使用简单,除了您不允许背景滚动的问题外,还完全解决了我的问题:

不过,据说这个问题在 Bootstrap 3 中得到了解决,如果您使用的是当前版本的 Bootstrap,则不需要该插件。

【讨论】:

    猜你喜欢
    • 2012-03-21
    • 1970-01-01
    • 2014-01-01
    • 2019-04-16
    • 2019-07-26
    • 2016-05-03
    • 2020-01-28
    • 2018-04-01
    • 1970-01-01
    相关资源
    最近更新 更多