6

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)

6
  • possible duplicate of Prevent BODY from scrolling when a modal is opened
    – ZEE
    Commented Feb 15, 2015 at 9:32
  • solution to that problem is not working in this case
    – fatCop
    Commented Feb 15, 2015 at 9:39
  • 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. Commented Feb 15, 2015 at 10:16
  • 1
    maybe try height: 100%?
    – QUB3X
    Commented Feb 15, 2015 at 10:40
  • @fatCop so it worked? I'll add as answer...
    – QUB3X
    Commented Feb 15, 2015 at 11:44

4 Answers 4

4

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

top: 0;
left: 0;
right: 0;
bottom: 0;
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.

2
  • Where do I place that? In the component's css? Or in the main css ?
    – muyat
    Commented Jan 7, 2021 at 13:29
  • anywhere as long as it comes after bootstrap css
    – ctf0
    Commented Jan 7, 2021 at 17:24
0

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

}

});

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.