显示模态对话框时如何隐藏身体滚动条?

时间:2011-03-13 22:07:32

标签: jquery css

我的主页有很多内容。当我创建任何模态对话框时,可以看到正文内容滚动条,当我们滚动时,它会向下滚动到页面底部。

在对话框中我还要显示很多内容。所以,如果我可以隐藏身体滚动条并仅显示模态的滚动条意味着,那将是一个很好的用户体验。

这个想法是,当在它上面显示模态对话框和一些可滚动内容时,禁用主页面滚动条并仅显示当前可见模态div的滚动条。

我需要做些什么来隐藏正文内容滚动条并在模态div中显示一个。

我的客户端充满了JavaScript& jQuery的。

任何建议都会很有意义!

4 个答案:

答案 0 :(得分:22)

$('body').css('overflow','hidden')添加到显示模态的函数中,将$('body').css('overflow','scroll')添加到关闭模态的函数中。

答案 1 :(得分:2)

当我使用$('body').css('overflow','scroll')$('body').css('overflow', 'inherit')时,滚动条不会出现在浏览器窗口的右下角,而是出现在页面容器的边缘...

我知道这个问题是因为特定网站的布局和CSS样式,但在这种情况下,更改html标签的样式似乎更具普遍性:

  • $('html').css('overflow','hidden'); - 隐藏滚动栏
  • $('html').css('overflow','scroll'); - 显示滚动条

答案 2 :(得分:1)

如果将所有正文内容包装在overflow: hidden的包装div中,则可以在打开模态对话框时动态设置该div的高度等于视口高度。

答案 3 :(得分:0)

您可以将其添加到bootstrap.js

行:421

  this.$element.hide(), this.backdrop(function() {
  a.$body.removeClass("modal-open"),$('html').css('overflow','scroll'), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})

行:397

this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()