bootstrap modal removes scroll bar

When I trigger a modal view in my page it triggers the scroll bar to disappear. It's an annoying effect because the background page starts moving when the modal moves in / disappears. Is there a cure for that effect?

This is a feature, class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

You can override this by specifying

.modal-open {
    overflow: scroll;
}

in your own css.

I think that inherit is better than scroll because when you open modal, it will always open with scroll, but when you don't have any scrolls you will get the same problem. So I just do this:

.modal-open {
  overflow: inherit;
}

Its better to use overflow-y:scroll and remove padding from body, bootstrap modal added padding to page body.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

IE browser Compatible: IE browser doing same thing by default.

I used

.modal-open {
  overflow-y: scroll;
}

In this case you avoids to display the horizontal scroll bar

Thank God I came accross this post! I was pulling my hair out trying to figure how to get my scrollbars back when closing the window using my own close link. I tried the suggestions for CSS but it just wasnt working properly. After reading

class modal-open gets added to the HTML body when you show the modal, and removed when you hide it. -- @flup

I came up with a solution using jquery, so incase anyone else has the same issue and the above suggestions dont work --

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>