Modal von einem anderen Modal-Formular funktioniert nicht im Bootstrap

Question

Ich versuche, ein modales Formular aus einem anderen modalen Formular zu zeigen. Allerdings bekomme ich die neue modale Form angezeigt, aber auf der Rückseite der alten modalen Form. Wie man das neue modale Formular vor allen zeigt. Bitte helfen Sie. Danke im Voraus. Unten ist mein Code

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

Answer 1

Hier können Sie mit einer Lösung gehen 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>

hoffe, dies wird Ihnen helfen.