The modal context of Bootstrap 3.3 breaks when the content is added after the mode is created

advertisements

I've got a web app running Twitter Bootstrap 3. Following an upgrade to 3.3, the modal backdrop breaks when I add content to the modal after it opens.

JsFiddle example, Bootstrap 3.2: Content is dynamically added to the modal after the modal opens, and the backdrop resizes appropriately.

JsFiddle example, 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.

My modals are absolute bog-standard, straight off the Bootstrap demo. What gives?

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


This problem has been solved in bootstrap version 3.3.5. so just use Bootstrap CSS and JS for version 3.5 and above. It will work well.