Bootstrap создает слишком много фоновых изображений

Мне нужно динамически загружать куски HTML, когда в приложении происходят определенные события. Некоторые из этих фрагментов HTML могут быть модальными диалогами. Это должно быть хорошо, однако при отображении модалы создают слишком много фоновых изображений.Bootstrap создает слишком много фоновых изображений

Следующий пример иллюстрирует проблему (протестирован в Google Chrome).

var html = '<div class="modal fade" tabindex="-1" role="dialog"> ' + 
 
' <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">Modal title</h4> ' + 
 
'  </div> ' + 
 
'  <div class="modal-body"> ' + 
 
'  <p>One fine body&hellip;</p> ' + 
 
'  </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 --> '; 
 

 
var dlg = $(html).appendTo('body'); 
 

 
setTimeout(function() { 
 
    
 
    dlg.modal({ 
 
    //backdrop: false, 
 
    keyboard: false 
 
    }); 
 
    
 
}, 1000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div>Hello</div>

Почему это происходит, и как это можно исправить, не требуя «многоразовый» модальный контейнер?

источник

2016-01-07 Yanick Rochon

? Ничего себе, это странно. Я не знаю, что это делает, но вы можете попытаться обойти его с помощью CSS-хака, используя '.modal-backdrop: last-child {display: none}' –

Да. Проблема в том, что иногда создается 3 или даже больше фона. Странно! : P –

Попробуйте использовать $ (". Modal"). Modal ({.... вместо dlg.modal ({... – pecci

Используйте переменную $ (". Modal") вместо переменной dlg для вызова модального.

var html = '<div class="modal fade" tabindex="-1" role="dialog"> ' + 
 
' <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">Modal title</h4> ' + 
 
'  </div> ' + 
 
'  <div class="modal-body"> ' + 
 
'  <p>One fine body&hellip;</p> ' + 
 
'  </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 --> '; 
 

 
$(html).appendTo('body'); 
 

 
setTimeout(function() { 
 
    
 
    $(".modal").modal({ 
 
    //backdrop: false, 
 
    keyboard: false 
 
    }); 
 
    
 
}, 1000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div>Hello</div>

источник

2016-01-07 22:20:32 pecci

Примечание: если DIV имеет идентификатор , с использованием идентификатора элемента тоже. Итак ... Я думаю, что jQuery не сохраняет добавленный элемент? –

Bootstrap создает слишком много фоновых изображений

ответ

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