CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Michael Falciglia
Michael Falciglia

Reputation: 1046

Bootstrap Modal Background Scrolling Issue

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!

Upvotes: 0

Views: 2805

Answers (2)

Devin
Devin

Reputation: 7720

in your JS code at the bottom of page, try replacing the "$" sign with "jQuery" (no quotes), and see if that helps, it's a common happening in WordPress and quite likely the root of your problem

Upvotes: 1

haxxxton
haxxxton

Reputation: 6442

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
});

Upvotes: 1

Related Questions