Bootstrap 3 modal creates scrollbar when opened

Question

I'm trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.

Code:

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE: http://jsfiddle.net/WqRBP/

A lot of sites I'm looking at use Bootstrap and they don't have this issue, so is there some sort of easy fix for the problem?

EDIT: The scrollbar appears in Chrome and IE, I haven't tested in other browsers.

Here's what I'm seeing in JSFIDDLE:

Answer 1

LVarayut's answer sent me in the right direction and what I ended up using is this:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.modal {
    overflow-y: auto;
}

Answer 2

The problem occurred because Twitter Bootstrap always shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right - margin-right: -15px. This can be done by using events show.bs.modal and hidden.bs.modal provided by Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

---

FYI:

show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Reference

Answer 3

It is so simple, just add to your css:

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

/*Optional:*/
.modal-open, .modal{padding-right:0!important}