2015-01-25 1 views
1

У меня есть веб-приложение, работающее с Twitter Bootstrap 3. После обновления до 3.3 модальный фон разбивается, когда я добавляю контент в модальный после его открытия.Bootstrap 3.3 modal backdrop breaks, когда контент добавляется после создания модала

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> 
+0

Сообщено об этом и обходной путь https://github.com/twbs/bootstrap/issues/15483 – DavidG

ответ

2

Эта проблема была решена в начальной загрузки версии 3.3.5. поэтому просто используйте Bootstrap CSS и JS для версии 3.5 и выше. Он будет работать хорошо.

Смежные вопросы