Bootstrap Modal Background Scrolling Issue

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!

You have a console error related to your jQuery `Uncaught TypeError: undefined is not a function` — Dan, Aug 18 '14 at 04:19
Please ensure that , the css files and js files are added correctly , bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js — Suganth G, Aug 18 '14 at 04:23
@Dan I think the error was I forgot to put an ID on the page I uploaded, but I just added it and it still does not fix the problem. — Michael Falciglia, Aug 18 '14 at 04:28
@Jake745 I'm pretty sure they are correct, the modal does work, its just the background scrolling that has an issue. — Michael Falciglia, Aug 18 '14 at 04:35

score 1 · Answer 1 · answered Aug 18 '14 at 04:27

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

answered Aug 18 '14 at 04:27

haxxxton

6,422
3
27
57

thanks, just tried, but it still is not working. I updated it with your answer if you want to look at it – Michael Falciglia Aug 18 '14 at 04:34

score 1 · Answer 2 · answered Aug 18 '14 at 04:53

1

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

answered Aug 18 '14 at 04:53

Devin

7,690
6
39
54

I was thinking it was a conflict myself, however I just tried and it did not work, but thanks for trying – Michael Falciglia Aug 18 '14 at 04:56
it's strange, because the inspector says that $ sign is the issue. Literally "$ is not a function". Anyways, did you try https://github.com/twbs/bootstrap/pull/6342 ? – Devin Aug 18 '14 at 04:59
1

I didn't critique or anything, that's the correct answer in 90 out of 100 cases I had having the same message on the same kind of script on the same WP install, a Jquery conflict. Might be not the case, but I can't test it myself, so he needs to do that, like in 100% of the answers at SO. – Devin Aug 18 '14 at 05:20
@MichaelFalciglia -- bootstrap 3.2 automatically adds .modal-open to the body and automatically prevents scrolling on the body if the modal fits in the body. I suspect that script you're using to modify the native scrollbars is preventing you from this. http://jsbin.com/hater/1/edit – Christina Aug 18 '14 at 05:46
@BootstrapThemer It is adding it, its just not working. i can see in chrome inspector that it is adding it to the body when I click on the modal button. – Michael Falciglia Aug 18 '14 at 05:50
You don't need any script to add the class and you don't need to add css, it's part of the default Bootstrap 3.2. Your scrollbar script is probably messing up the site. – Christina Aug 18 '14 at 05:51

Bootstrap Modal Background Scrolling Issue

2 Answers2