最初のモーダルを非表示にして、ショーの第2モーダルを表示します。

Question

最初にモーダルを閉じて、別のモーダルをフォームに表示しようとしています。 私は最初のモーダルを閉じるのではなく、最初のモーダルの後ろに2番目のモーダルを表示します。ここで

コードです：

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

Answer 1

これを達成したいと思う。

は、それが働いて見て、フルスクリーンでのコードスニペットを実行してみてください -

$(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

固有のコードを見ることなく、それはあなたに正確な答えを与えることは困難です。それは隠されていたら、別のモーダルを示し、その後

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

：しかし、ブートストラップドキュメントから、あなたはこのようなモーダルを非表示にすることができます

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

Answer 3

あなたはコードの下に使用することにより、他を非表示にすることができ、他のモーダルを隠しますまずブートストラップモーダルを使用して第2

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

Answer 4

を示し

<!-- 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>