Bootstrap模式背景滚动问题

Question

When my Bootstrap Modal Window is open, I have been unable to stop background scrolling from the main page. I followed the directions given in this StackOverflow question, but I have been unsuccessful so far: Prevent BODY from scrolling when a modal is opened

On the left side, near top of this page, after it loads, you will see a button that says "Large Modal". If you click it, it will open a modal window. After its open, if you scroll up and down, you will see the background moving. http://gettinmobile.com/home.html

I have added the CSS as directed in the stackoverflow question I linked to above:

body.modal-open {
    overflow: hidden;
}

I have added the javascript shown on the same stackoverflow question, though I am not sure this is done correctly:

   <script type='text/javascript'>

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

Any help would be appreciated, maybe someone can see what I'm doing wrong... thanks!

Answer 1

You need to wait for jQuery to finish loading before you start binding events. You can do this most simply with an anonymous function:

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

Answer 2

在页面底部的JS代码中，尝试将“ $”符号替换为“ jQuery”（不带引号），看看是否有帮助，这在WordPress中很常见，很可能是问题的根源