How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?

html twitter-bootstrap modal-dialog twitter-bootstrap-3
fat fantasma picture fat fantasma · Sep 27, 2013 · Viewed 110.3k times · Source

How to prevent background scrolling when Bootstrap 3 modal open on mobile platforms? On desktop browsers the background is prevented from scrolling and works as it should.

On mobile browsers (Safari ios, Chrome ios, etc), when a modal is opened and using your finger to scroll it, the background also scrolls as does the modal. How do I prevent that?

Answer

Bass Jobsen picture Bass Jobsen · Sep 28, 2013

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/

Related questions

How to center spin.js spinner in bootstrap 3 modal?

I am trying to display and center the spin.js spinner in a Bootstrap 3 modal. Using the code below I got it to work in IE and FF but NOT in Chrome, Safari Desktop, Chrome IOS, Safari IOS. The problem …

Read More
Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user …

Read More
Set bootstrap modal body height by percentage

I am trying to make a modal with a body that will scroll when the content becomes too large. However, I want the modal to be responsive to the screen size. When I set the max-height to 40% it has no …

Read More