Bootstrap modal: background jumps to top on toggle

Question

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top.

I have done everything I could to

Answer 1

body.modal-open {
overflow: visible !important;
}

I needed the important attribute for it to fix it

Answer 2

If pstenstrm's answer doesn't work for you, try combining it with this replacement button HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

This should keep the button on-screen.

Answer 3

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

This will help you to stop the scroll bar going on the top.It worked for me

Answer 4

I don't see a specific error, but I would advise you to check your html syntax.

A tiny test with your source gives me errors like

Line 127, Column 34: Unclosed element div.

              <div class="inner onlySides">

This could be an issue.

Answer 5

If you are calling modal with tag. Try removing '#' from href attribute.And call modal with data attributes.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Answer 6

height:100% is solve problem, but you must add correct "div"