Verberge zuerst Modal Show Show zweiten Modal auf Klick-Funktion

Question

Ich versuche, zuerst Modal dann zu einem anderen Modal mit einem Formular zu schließen. Ich habe versucht, diffrent solution.It schließt nicht das erste Modal aber zeigen das zweite Modal hinter dem ersten Modal.

Hier ist der Code:

$('#WEITER').click(function() { 
    $('#myModal5').data('modal', null); 
    $('#myModal55').modal('show'); 
}); 

Answer 1

Ich hoffe, dass Sie das erreichen wollen.

Versuchen Sie den Code-Schnipsel mit Vollbild ausgeführt wird, um zu sehen arbeiten -

$(document).ready(function(){ 
 
    $("#test1").click(function(){ 
 
     $('.bs-example-modal-lg').modal('show'); 
 
     $('.bs-example-modal-sm').modal('hide'); 
 
    }); 
 
    
 
    $("#test2").click(function(){ 
 
     $('.bs-example-modal-lg').modal('hide'); 
 
     $('.bs-example-modal-sm').modal('show'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<hr/> 
 

 

 

 
<hr/> 
 

 
<!-- 1 modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Show Modal1</button> 
 

 

 
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
 
    <div class="modal-dialog modal-lg" 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">&times;</span></button> 
 
     <h4 class="modal-title" id="exampleModalLabel">Modal 1</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Recipient:</label> 
 
      <input type="text" class="form-control" id="recipient-name"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Message:</label> 
 
      <textarea class="form-control" id="message-text"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Send message</button> 
 
     
 
     <button type="button" class="btn btn-primary" id="test2">Show Second/ Hide First</button> 
 
     
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- 2 modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Show modal2</button> 
 

 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm" 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">&times;</span></button> 
 
     <h4 class="modal-title" id="exampleModalLabel">Modal 2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="control-label">Recipient:</label> 
 
      <input type="text" class="form-control" id="recipient-name"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="control-label">Message:</label> 
 
      <textarea class="form-control" id="message-text"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Send message</button> 
 
     
 
     <button type="button" class="btn btn-primary" id="test1">Show First/ Hide Second</button> 
 
     
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Ohne spezifischen Code zu sehen, dann ist es schwierig Sie eine genaue Antwort zu geben. Doch von den Bootstrap-Dokumentation können Sie die modale wie dies verbergen:

$('#myModal').modal('hide'); 

Dann eine andere modale zeigen, wenn es versteckt ist:

$('#myModal').on('hidden', function() { 
    // Load up a new modal... 
    $('#myModalNew').modal('show') 
}); 

Answer 3

Sie anderen, indem Sie unten Code verstecken, verbergen andere modal zuerst, dann zeigen zweiten

$('#WEITER').click(function() { 
$('#myModal5').modal('hide'); 
$('#myModal55').modal('show'); 
}); 

Answer 4

Bootstrap modal Verwendung

<!-- Trigger the modal with a button --> 



<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button> 

    <!-- Modal 1--> 
    <div class="modal fade" id="myModal1" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal2">open new modal</button> 
     </div> 
     </div> 

    </div> 
    </div> 

    <!-- Modal 2--> 
    <div class="modal fade" id="myModal2" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div>