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)

possible duplicate of [Prevent BODY from scrolling when a modal is opened](http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened) — ZEE, Feb 15 '15 at 09:32
I found a work around I don't know if it helps, but did you notice that when you click an input field inside the modal the background doesn't scroll anymore (at least this is what happening in my app) so just add a jquery line that focuses on one of the inputs inside the modal and I think it will work. — Yousef_Shamshoum, Feb 15 '15 at 10:16

score 4 · Accepted Answer · answered Feb 15 '15 at 11:48

4

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

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

answered Feb 15 '15 at 11:48

QUB3X

526
4
18

ctf0 · Answer 2 · 2016-02-27T12:53:33.790

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.

edited Feb 27 '16 at 12:53

answered Feb 24 '16 at 03:43

ctf0

6,991
5
37
46

Where do I place that? In the component's css? Or in the main css ? – muyat Jan 07 '21 at 13:29
anywhere as long as it comes after bootstrap css – ctf0 Jan 07 '21 at 17:24

score 0 · Answer 3 · answered Jun 19 '15 at 09:02

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

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

My workflow

$('#modalWindow').modal();

$.ajax({

....

success: function(html){
$("#modalWindowContent").html(html);

// great, but height of popup window was changed, let's update it

$('#modalWindow').modal('handleUpdate');
}

});

score 0 · Answer 4 · answered Jun 23 '15 at 12:42

Maybe somebody else will find it helpful. For me for some reason modal-backdrop(faded background) was scrolling together with modal. Finally found that the only way to reproduce this was on Macbook(mavericks/yosemite) built-in screen. If I would move chrome(v44) window to other monitor, background fade would stop moving when scrolling modal.

How to prevent background scroll when bootstrap modal is open

4 Answers4

Linked