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?

this how looks now: enter image description here

and want this: enter image description here

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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -