Twitter bootstrap 3 当滚动条可见时打开模式会导致页面移动

以下是引导程序演示中的模式代码：

<!-- 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 -->

启动演示模式
&时代；
情态标题
...
接近
保存更改

如果页面上没有滚动条，那么打开一个模式就可以了（尽管它确实在右侧覆盖了一个不必要的滚动条）：

但是，如果有可见的滚动条，则打开模式会导致外观非常糟糕的页面移动：

我不知道是否所有浏览器都会出现这种情况，但我在Windows 7上使用的是最新版本的Chrome，下面是一段视频：

---

如何修复这种非常难看的页面切换？

我想我遇到了同样的问题，尽管我不能100%确定它是完全相同的。无论如何，我通过修补他们的javascript并添加一些CSS规则来修复它。这对我来说是最好的选择，所以我不必直接更改他们的源代码

以下是CSS规则：

// Make bootstrap's normal 'modal-open' class have no effect, 
// since we're going to use our own 'custom-modal-open' class

.modal-open {
  overflow: auto;
}

// Define our own custom class that we'll apply to the body element
// at the appropriate time (to prevent the shifting).

.custom-modal-open {
  overflow: hidden;
}

// Also override the overflow value for the modal 'class'.  
// Bootstrap has it set to "scroll" which causes it to appear when
// it's not needed, and also makes the shift tougher to fix.

.modal {
  overflow: auto;
}

以下是coffeescript猴子补丁：

# Store bootstrap's 'modal' function for safe keeping,
# so we can use it within our custom version.

$.fn.old_modal = $.fn.modal
$.fn.modal = (option, related_target) ->

  # Call bootstrap's implementation.  It runs normally other
  # than the fact that the .modal-open rule has no effect.

  $(this).old_modal(option, related_target)
  modal_obj = $(this).data('bs.modal')

  # The 'modal' function can be called for other reasons, and 
  # we're only interested in the case of the modal being shown.

  if (modal_obj.options.show)
    $('body').addClass('custom-modal-open')
    $(this).on('hide.bs.modal', (e) =>

      # Super-hacky...copy the padding-right to the margin-right
      # so that we're responsible for removing it later.

      scroll_padding = $('body').css('padding-right')
      $('body').css('margin-right', scroll_padding)
      $(this).off('hide.bs.modal')
    )
$(this).on('hidden.bs.modal', (e) =>

  # The grand finale...remove the modal-open and right side padding
  # *gasp* at the SAME TIME.  Bad twitter. But thanks for having 
  # both the hide and hidden events to make this possible :)

  $('body').removeClass('custom-modal-open')
  $('body').css('margin-right', '')
  $(this).off('hidden.bs.modal')
)

---

祝你好运…希望这个修正对你也有用。对我来说，它似乎在Chrome和Firefox上运行得很好。

这是一个应该在下一个版本或之后的版本中修复的错误，现在读到：@cab-well这太令人失望了。。这个问题差不多在六个月前就开始了，现在还没有解决：（-这有一个fix@cab我试过了，但没用，不幸的是……那太糟糕了。我只是碰巧订阅了回购协议，并注意到了它，但我不使用模式，我更喜欢fancyBox。希望有其他人来帮你。