Пробую создавать модальные окна (разметку) в bootstrap программно и отображать потом по нужному событию.
$('#add_app_form').click(function() {
_alert('test', 'Ошибка');
return false;
})
var _alertWindow;
function _alert(str, title) {
if (!_alertWindow) {
_alertWindow = $('<div class="modal fade" tabindex="-1" role="dialog">\
<div class="modal-dialog" role="document">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>\
<h4 class="modal-title" date-title="Информация">Информация</h4>\
</div>\
<div class="modal-body">\
<p>One fine body…</p>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-default" data-dismiss="modal">ОК</button>\
</div>\
</div><!-- /.modal-content -->\
</div><!-- /.modal-dialog -->\
</div><!-- /.modal -->')
.appendTo(document.body);
}
_alertWindow.modal();
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<a href="#" id="add_app_form">тест</a>
Окно отображается нормально, но закрывается глючно. При таком создании bootstrap почему-то создает два "окна" затенения $('.modal-backdrop') под модальным окном (разметка, когда отображается модальное окно).
<div class="modal fade in" tabindex="-1" role="dialog" style="display: block; padding-right: 16px;">...</div><!-- /.modal -->
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop in"></div>
Сами эти два окна при наложении уменьшают прозрачность, но основная проблема не этом. При закрытии окна bootstrap удаляет только одно окно затенения. Разметка после закрытия модального окна.
<div class="modal fade in" tabindex="-1" role="dialog" style="display: block; padding-right: 16px;">...</div><!-- /.modal -->
<div class="modal-backdrop in"></div>
Т.к. одно окно .modal-backdrop не удалилось, оно блокирует всю страницу и "затеняет" ее. Я придумал костыль против этого, но мне он не нравится. Повешать обработку на события закрытия окна и удалять вручную лишнее окно.
_alertWindow.on('hide.bs.modal', function () {
_alertWindow.find('~ .modal-backdrop.in:last-child').remove();
});
Этот костыль не исправляет ошибку с наложением двух окон и непонятно, что будет с несколькими модальными окнами на странице. Если разметку модального окна сделать в html, никаких глюком не наблюдается.
Кто-нибудь сталкивался с таким глюком и как его избегали?