I try to create modal windows (markup) in bootstrap programmatically and then display on the desired event.
$('#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>
The window is displayed normally, but closes buggy. With this creation, the bootstrap for some reason creates two shading windows $ ('. Modal-backdrop') under the modal window (markup when the modal window is displayed).
<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>
These two windows themselves reduce transparency when applied, but this is not the main problem. When you close the window, bootstrap removes only one shading window. Layout after closing the modal window.
<div class="modal fade in" tabindex="-1" role="dialog" style="display: block; padding-right: 16px;">...</div><!-- /.modal --> <div class="modal-backdrop in"></div>
Because one window. modal-backdrop has not been removed, it blocks the entire page and "obscures" it. I came up with a crutch against it, but I don't like it. Hang up on closing window events and manually remove an extra window.
_alertWindow.on('hide.bs.modal', function () { _alertWindow.find('~ .modal-backdrop.in:last-child').remove(); });
This crutch does not fix the error with the imposition of two windows and it is not clear what will happen with several modal windows on the page. If the markup of the modal window is done in html, no glitch is observed.
Has anyone encountered such a glitch and how was it avoided?