How to prevent background scrolling when opening boot mod

Question

I am using Bootstrap v3.0.2 . Want to disable background scrolling when the modal is open. I tried:

.modal-open { overflow: hidden; } 

But it does not work. I found a solution to this problem:

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

But position: fixed; causes additional white space at the bottom of the page in chrome (less than 100% view), as well as for large displays (in 100% mode) when opening and closing the modal. How to get rid of it? (My modal contains scrollable fields)

Answer 1

Use height: 100% to make .modal-open suitable for the entire screen. Ultimately use

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

Answer 2

If anyone else does, just use

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

EDIT: I don't know why it was canceled by the vote, but this is what fixed my problem regarding scrolling.

Answer 3

I had a similar problem, in my case the solution was just to update the popup

$ ('# modal window') modal ('handleUpdate') ;.

My workflow

$ ('# modal window') modality () ;.

$. Ajax ({

....

success: function (html) {

 $("#modalWindowContent").html(html); // great, but height of popup window was changed, let update it $('#modalWindow').modal('handleUpdate'); 

}

});

Answer 4

Perhaps this will help someone. For me, for some reason, the modal background (faded background) scrolled along with the modal. It finally turned out that the only way to reproduce this was on the Macbook's built-in screen (mavericks / yosemite). If I moved the chrome (v44) window to another monitor, the background attenuation would stop moving when the modal file scrolls.