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

I had the same issue using Bootstrap 2.3.2

It was a problem for clicking on a link:

The trick was: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

and the js:

function openModal() {
    $('#myModal').modal('show');
}

Answer 2

The easiest way to solve the jumping background is to define two parameters:

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

Answer 3

Finally figured this one out. Do NOT wrap the button targeting the modal in an anchor tag.

Bad

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Good

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>

Answer 4

if you are using anchor tag as <a href"#" ..> ... </a> and href="#" is creating problem, remove that. You can read more over here

Answer 5

I tried replicating this problem on my localhost and as weird as it may seem, there is a conflict with the Bootstrap JS file that you are using.

Try commenting your code of:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>    

And instead use Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

This made it work for me.

I tried it with Bootstrap version 3 but that didn't work. I am still unable to pinpoint the trouble part but somewhere along Firebug threw me a e.preventDefault() is not a function error - I am guessing this should be the root cause but I am yet to compare it with the other JS files.

Answer 6

you have 2 extra closing div tags just before to the <div id="footer"> or after the <div id="mainFrame" class="group"> div. I'm using visual studio 2012 express to inspect this.

Please remove these 2 extra divs and let us know how it works. I removed extra divs and removed all custom scripts. retained only jquery core and bootstrap at the footer. here is the sreenshot of final output. here is the jsbin playground for you which is working fine.

I suggest you to use headjs to load all the scripts and css files. also it is not a good practice of loadidng any scripts twice.