How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?
See here: https://github.com/twbs/bootstrap/issues/7501
So try:
$('body').css('overflow','hidden');
$('body').css('position','fixed');
V3.0.0. should have fixed this issue. Do you use the latest version? If so post an issue on https://github.com/twbs/bootstrap/
Try this,
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}
I tried the accepted answer which prevented the body from scrolling but had the issue of scrolling to the top. This should solve both issues.
As a side note, it appears overflow:hidden doesn't work on body for iOS Safari only as iOS Chrome works fine.
var scrollPos = 0;
$('.modal')
.on('show.bs.modal', function (){
scrollPos = $('body').scrollTop();
$('body').css({
overflow: 'hidden',
position: 'fixed',
top : -scrollPos
});
})
.on('hide.bs.modal', function (){
$('body').css({
overflow: '',
position: '',
top: ''
}).scrollTop(scrollPos);
});