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,

Answer 1

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