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

Question

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.<

Answer 1

If you use jQuery you can do this with scrollTop

1. Save the body's vertical scroll position;
2. Disable scroll on the body;
3. Show modal;
4. Close modal;
5. Reenable scroll on body;
6. Set saved scroll position.

#modal {
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    width: 100%;
}

$('.open-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    scrollTo = $('body').scrollTop();
    $('body').css("position", "fixed");
});

$('.close-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    $('body').css("position", "static");
    $('body').animate({scrollTop: scrollTo}, 0);
});