jquery - Can bootstrap modal dialog overlay another dialog? -
<button class="btn" onclick="$('#firstmodal').modal('show');">first</button> <!-- modal --> <div id="firstmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-body"> <button class="btn" onclick="$('#secondmodal').modal('show');">second</button> </div> </div> <!-- modal --> <div id="secondmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-body"> error message goes here. </div> </div>
everything works fine; problem first dialog displayed on overlay of second dialog. how can fix this?
i wrote blog post how solve stacking problem programatically: http://gurde.com/stacked-bootstrap-modals/
$(document) .on('show.bs.modal', '.modal', function(event) { $(this).appendto($('body')); }) .on('shown.bs.modal', '.modal.in', function(event) { setmodalsandbackdropsorder(); }) .on('hidden.bs.modal', '.modal', function(event) { setmodalsandbackdropsorder(); }); function setmodalsandbackdropsorder() { var modalzindex = 1040; $('.modal.in').each(function(index) { var $modal = $(this); modalzindex++; $modal.css('zindex', modalzindex); $modal.next('.modal-backdrop.in').addclass('hidden').css('zindex', modalzindex - 1); }); $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeclass('hidden'); }
Comments
Post a Comment