Bootstrap Modal: Background Jumps to Top on 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 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.

page scrolls to top on modal popup

I feel the culprit is href="#"

What you can do 2 things,

Just remove href="#"
Change <a> to `
<button type="button" id="edit_product" data-id="<?php echo $lat['product_id'];?>" name="id" data-text="Add To Cart" class="my-cart-b item_add add_to_cart">Add To Cart</button>

This should help you.

Notice that i have added type="button" if you are following 2nd approach.

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 scrolls background content

The first answer to this question worked for me. I just added

body.modal-open {
  overflow: visible;
}

to my css.

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.

Body jump to top when open modal

You should update your HTML tag instead of the body tag

For your javacript, change body to html:

var modal = document.getElementById('modal');
var elements = document.getElementsByClassName('toggle-modal');
var html = document.getElementsByTagName('html')[0];
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', toggleClass);
    }

function toggleClass() {
    html.classList.toggle('disable-html-scrolling');
    modal.classList.toggle('is-active');
}

And in your css change your .disable-body-scrolling to:

.disable-html-scrolling {
    overflow: hidden;
}

Bootstrap Modal: Background Jumps to Top on Toggle

Bootstrap modal: background jumps to top on toggle

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

page scrolls to top on modal popup

Bootstrap modal: background jumps to top on toggle

Bootstrap modal scrolls background content

Prevent BODY from scrolling when a modal is opened

Body jump to top when open modal

Related Topics

Leave a reply