How to Stop Background from Jumping to the Top on Modal Toggle

Bootstrap modal: background jumps to top on toggle

When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Bootstrap modal: background jumps to top on toggle

When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Prevent BODY from scrolling when a modal is opened

Bootstrap's modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the code above belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

Update 8th feb, 2013

This has now stopped working in Twitter Bootstrap v. 2.3.0 -- they no longer add the modal-open class to the body.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Update 11th march, 2013
Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

See this: https://github.com/twitter/bootstrap/pull/6342 - look at the Modal section.

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/

Bootstrap v3 - Opening a modal window forces the page to scroll up to the top

I found the problem was some CSS I used to always force a scrollbar. This CSS gave the body a height of 100%. As soon as I removed this the modal worked perfectly without scrolling to top.

How to disable body scrolling when modal is open IOS only

I've created the following solution, which works on iOS 12!

Although the embedded demo below uses Bootstrap 4, the same solution works equally well with Bootstrap 3 since none of the modal class or event names are different.

Step 1: Use fixed positioning to freeze the body in place when the modal is open

When a Bootstrap modal is opened, a class called .modal-open is added to the body. Add the following additional styles to this class:

body {
    &.modal-open {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
}

Now whenever a modal is opened, the body will be fixed in place and sized to the same dimensions as the viewport itself. This completely prevents scrolling because there's nowhere and nothing to scroll to!

But: this also means that opening a modal will cause the page to jump to the top, because the body no longer extends past the bottom edge of the viewport (assuming the page content is taller).

Step 2: Simulate the previous scroll distance while the modal is open

Bootstrap exposes events that fire when a modal is opened or closed. We can use these to solve the "jump to the top" issue by pulling the top of the body up when a modal is opened, so that it looks like the scroll position hasn't changed:

$(function() {
    var $window = $(window),
        $body = $("body"),
        $modal = $(".modal"),
        scrollDistance = 0;

    $modal.on("show.bs.modal", function() {
        // Get the scroll distance at the time the modal was opened
        scrollDistance = $window.scrollTop();

        // Pull the top of the body up by that amount
        $body.css("top", scrollDistance * -1);
    });
});

However, the page will still jump to the top when the modal is closed because the scrollTop value of the window is still 0.

Step 3: Reset everything when the modal is closed

Now we just need to hook into the event that fires when the modal is closed and put everything back how it was:

Remove the fixed positioning and negative top value on the body
Set the window's scroll position back to what it was originally

$modal.on("hidden.bs.modal", function() {
    // Remove the negative top value on the body
    $body.css("top", "");

    // Set the window's scroll position back to what it was before the modal was opened
    $window.scrollTop(scrollDistance);  
});

There's no need to manually remove the fixed positioning on the body, because this is set through the .modal-open class, which Bootstrap removes when the modal is closed.

Demo

Put it all together, and now you can prevent background scrolling on iOS while a modal is open without losing your scroll position!

Open the following link on an iOS device: https://daguy.github.io/ios-modal-fix/

How to Stop Background from Jumping to the Top on Modal Toggle

Bootstrap modal: background jumps to top on toggle

Bootstrap modal: background jumps to top on toggle

Prevent BODY from scrolling when a modal is opened

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

Bootstrap v3 - Opening a modal window forces the page to scroll up to the top

How to disable body scrolling when modal is open IOS only

Related Topics

Leave a reply