從另一個模態窗體的模態不工作在引導

Question

我試圖從另一個模態窗體顯示模態窗體。不過，我得到了新的模態形式，但顯示在舊模態形式的背面。如何獲得所有前面顯示的新模態形式。請幫忙。提前致謝。下面是我的代碼

$('#modal1').modal('show'); 

Answer 1

在這裏，你去了一個解決方案http://jsfiddle.net/wtj6nacd/4/

$(document).ready(function() { 
 

 
    $('#openBtn').click(function() { 
 
    $('#myModal').modal({ 
 
     show: true 
 
    }) 
 
    }); 
 

 
    $(document).on({ 
 
    'show.bs.modal': function() { 
 
     var zIndex = 1040 + (10 * $('.modal:visible').length); 
 
     $(this).css('z-index', zIndex); 
 
     setTimeout(function() { 
 
     $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); 
 
     }, 0); 
 
    }, 
 
    'hidden.bs.modal': function() { 
 
     if ($('.modal:visible').length > 0) { 
 
     // restore the modal-open class to the body element, so that scrolling works 
 
     // properly after de-stacking a modal. 
 
     setTimeout(function() { 
 
      $(document.body).addClass('modal-open'); 
 
     }, 0); 
 
     } 
 
    } 
 
    }, '.modal'); 
 
});

/* crazy batman newspaper spinny thing */ 
 

 
.rotate { 
 
    transform: rotate(180deg); 
 
    transition: all 0.5s; 
 
} 
 

 
.rotate.in { 
 
    transform: rotate(1800deg); 
 
    transition: all 1.5s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script> 
 

 
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> 
 

 
<div class="modal fade" id="myModal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h4 class="modal-title">Modal 1</h4> 
 

 
     </div> 
 
     <div class="container"></div> 
 
     <div class="modal-body">Content for the dialog/modal goes here. 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <p>more content</p> 
 
     <br> 
 
     <br> 
 
     <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a> 
 

 
     </div> 
 
     <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
     <a href="#" class="btn btn-primary">Save changes</a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="myModal2"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
     <h4 class="modal-title">Modal 2</h4> 
 

 
     </div> 
 
     <div class="container"></div> 
 
     <div class="modal-body">Content for the dialog/modal goes here. 
 
     <br> 
 
     <br> 
 
     <p>come content</p> 
 
     <br> 
 
     <br> 
 
     
 
     </div> 
 
     <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> 
 
     <a href="#" class="btn btn-primary">Save changes</a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

希望這會幫助你。