CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
fatCop
fatCop

Reputation: 2576

How to prevent background scroll when bootstrap modal is open

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)

Upvotes: 6

Views: 21476

Answers (4)

ctf0
ctf0

Reputation: 7579

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.

Upvotes: 2

Sim
Sim

Reputation: 13

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.

Upvotes: 0

sukinsan
sukinsan

Reputation: 513

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

}

});

Upvotes: 0

QUB3X
QUB3X

Reputation: 536

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

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

Upvotes: 4

Related Questions