How To Stop Background From Jumping To The Top On Modal Toggle

I using twitter bootstrap modals on a one pager website. When I click on the button to open the modal, the background jumps to the top of the page and opens the modal. The same thi

Solution 1:

If you have the height of either body or html is set to 100% as in my case, add the following to your CSS file:

html, body {
    overflow: scroll;
}

The background now should keep its original position.

Solution 2:

Add following class in css:

.modal-opned {
  overflow-y:hidden;
}

add it to body tag when modal is opened and remove it when modal is closed.

Solution 3:

As I also struggled for days with this problem, my solution was simple - I played with the HTML and I found that when the modal was closing .modal-backdrop was causing the issue. So I simply commented out this from my CSS and everything is fine now. Use your Browser inspector for problems like this!

//.modal-backdrop + #app-wrapper {
    //overflow: hidden;
//}

Solution 4:

In case this helps anyone for this exact scenario, the following CSS solved the issue:

body.modal-open {
  position: inherit;
  overflow: visible;
}

body.modal-open .modal {
  overflow: hidden;
}

The first block allows the page scrollbar to show and prevents the jump to the top when opening the modal. The second block stops the modal overflow adding its own second scrollbar.

Solution 5:

I had the same issue and removing href="#" solved it.