How to prevent background scroll when bootstrap modal is open

Question

I'm using Bootstrap v3.0.2. Want to disable background scrolling when a modal is open. I tried:

.modal-open {
  overflow: hidden;
}

But it isn't working. I found a solution to this problem is:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

But position: fixed; causing an extra white-space at the bottom of the page in chrome(less than 100% view) and also for large displays(in 100% view) while opening and closing the modal. How to get rid of it? (My modal contains scroll-able fields)

Answer 1

Use height: 100% to make the .modal-open fit the whole screen. Eventually use

top: 0;
left: 0;
right: 0;
bottom: 0;

Answer 2

incase anyone having this still, just use

.modal-open {
    overflow: hidden !important;
}

EDIT: have no idea why its de-voted but this is what fixed my issue regarding the scrolling.