javascript - Bootstrap 模态背景滚动问题

标签 javascript jquery html css twitter-bootstrap

当我的 Bootstrap 模态窗口打开时,我无法停止主页的背景滚动。我遵循了这个 StackOverflow 问题中给出的指示,但到目前为止我没有成功:Prevent BODY from scrolling when a modal is opened

加载后,在该页面顶部附近的左侧,您会看到一个显示“Large Modal”的按钮。如果单击它,它将打开一个模态窗口。打开后,如果你上下滚动,你会看到背景在移动。 http://gettinmobile.com/home.html

我已经按照上面链接的 stackoverflow 问题中的指示添加了 CSS:

body.modal-open {
    overflow: hidden;
}

我已经添加了在同一个 stackoverflow 问题上显示的 javascript,但我不确定这样做是否正确:

   <script type='text/javascript'>

   $("#myModal").on("show", function () {
     $("body").addClass("modal-open");
   }).on("hidden", function () {
     $("body").removeClass("modal-open")
   });
   </script>

任何帮助将不胜感激,也许有人可以看到我做错了什么...谢谢!

最佳答案

在开始绑定(bind)事件之前,您需要等待 jQuery 完成加载。您可以使用匿名函数最简单地完成此操作:

$(function(){
    // YOUR CURRENT JS CODE HERE
});

关于javascript - Bootstrap 模态背景滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25356261/

相关文章:

javascript - 在子 img 上显示父容器的背景

javascript - 如何将我的过滤器搜索输入文本与我的正则表达式相匹配?

javascript - 下拉菜单对齐问题

javascript - 如何使克隆选择的行为独立于原始选择?

javascript - 如何让我的导航链接的子列表项显示在它的右侧?

javascript - DIV 不可见? JavaScript

javascript - Google自定义搜索在底部创建了一个巨大的空白区域

javascript - 将 jQuery/JavaScript 函数应用于 jTable 检索的 SQL 数据

JQuery:在鼠标悬停时向下滑动图像

javascript - 需要帮助使用秒、图像、<head> 和 <div> 完成 JavaScript 时钟