Twitter bootstrap modal appearing in wrong location, not centered and the buttons are not clickable

Question

I'm using Twitter Bootstrap 3 to create modals on my page; however, the modals are appearing in a odd way (not centered, and the buttons are covered by the overlay hence not clickable). Anybody know what the issue is?

Here is a link to the live page . (click on any physician's image)

<div class="physician-block post-id-154" data-target="#modal-for-post-154" data-toggle="modal">
    <div class="physician-img">
    <img src="123.jpg" alt="" class="img-responsive colorbox-1617">
</div>
<div class="caption">
    <div class="physician-title">
        <h3><a href="http://example.com/">TITLE</a></h3>
    </div>
    <div class="physician-position-affiliation"><a href="http://example.com">POSITION</a></div>
</div>

<div class="modal fade" id="modal-for-post-154">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">TITLE</h4>
      </div>
      <div class="modal-body">
        SOME CONTENT 
      </div>
      <div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

Thanks

Answer 1

You placed the modals on the wrong place. Put them at the end of your content, near to the end of the body.