Question

我有一个运行Twitter Bootstrap 3的网络应用程序。升级到3.3之后，当我打开后向模态添加内容时，模态背景会中断。

JsFiddle示例，Bootstrap 3.2： Content is dynamically added to the modal after the modal opens, and the backdrop resizes appropriately.

JsFiddle示例，Bootstrap 3.3： Content is dynamically added to the modal after the modal opens. When you scroll down, the backdrop is only as high as the window was before the content was added. If you resize the window, the backdrop finally resizes.

我的模态是绝对的标准，直接从Bootstrap演示开始。是什么给了什么？

<!-- Button trigger modal -->
<button type="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-label="Close"><span aria-hidden="true">&times;</span></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>
  </div>
</div>

<script>
$("#myModal").on('shown.bs.modal', function () {
    var i = 1;
    while (i < 100) {
       $("#myModal").find(".modal-body").append("<p>Content " + i + " added after modal opened</p>");
       i++;
    }
});
</script>

Answer 1

此问题已在bootstrap版本3.3.5中解决。所以只需使用Bootstrap CSS和JS for 3.5及更高版本。它会运作良好。

Answer 2

这是Bootstrap的Modal小部件中一个已知的漏洞：https://github.com/twbs/bootstrap/issues/15136

在创建模态后添加内容时，Bootstrap 3.3模态背景会中断

2 个答案: