【问题标题】:Bootstrap 3.3 modal backdrop breaks when content is added after the modal is created在创建模态后添加内容时,Bootstrap 3.3 模态背景会中断
【发布时间】:2015-01-25 23:53:36
【问题描述】:

我有一个运行 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>

【问题讨论】:

标签: css twitter-bootstrap


【解决方案1】:

此问题已在引导版本 3.3.5 中得到解决。因此,只需将 Bootstrap CSS 和 JS 用于 3.5 及以上版本即可。它会很好用。

【讨论】:

    【解决方案2】:

    这是 Bootstrap 的 Modal 小部件中的一个已知开放错误:https://github.com/twbs/bootstrap/issues/15136

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-03-14
      • 2015-05-13
      • 1970-01-01
      • 1970-01-01
      • 2015-08-15
      • 2016-12-30
      • 1970-01-01
      • 2014-03-18
      相关资源
      最近更新 更多