Keine Ausführung bis Bootstrap Modal gibt Wert

Question

zurück Ich verwende Bootsrap Modal in meinem Projekt. Ich kann meinen Code nicht posten.

Also erläutere ich mein Szenario mit dieser jsfiddle.

Ich habe zwei Modale modal1, modal2 und erhalten Wert von modal1 und Anzeige modal2.

Sobald ich unter Code ausführen. Ich bekomme beide Modal nicht eins nach dem anderen.

Ist es möglich, die Ausführung zu stoppen, bis modal1 den Wert zurückgibt.

$('.btn').click(function() { 
    $('#modal1').modal(); 
    var returnedvalue = $('#modalvalue').val(); 
    $('#Response').text(returnedvalue); 
    $('#modal2').modal(); 
}); 

FULL CODE Fiddle

Answer 1

Rufen Sie den zweiten modal, wenn Klick auf den Button innerhalb der ersten modalen

HTML

<div id="modal1" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Modal 1</h4> 
     </div> 
     <div class="modal-body"> 
     <p><input type="text" id="modalvalue"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" id="btn1" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

<div id="modal2" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">Modal 2</h4> 
     </div> 
     <div class="modal-body"> 
     <h3> 
      Response from Modal1: <span id="Response"></span> 
     </h3> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 




<a class='btn btn-primary btn' data-direction='top'>Modal</a> 

JAVASCRIPT

$('.btn').click(function() { 
    $('#modal1').modal(); 

}); 

$('#btn1').click(function() { 
var returnedvalue = $('#modalvalue').val(); 
    $('#modal2').modal(); 
    $('#Response').html(returnedvalue); 
}); 

Answer 2

Erstellen Sie eine eigene Klasse für jede modale Schaltfläche, um den Text in der zweiten Klick-Ereignis ändern (wenn Sie zum ersten modalen klicken speichern)

<button type="button" class="btn btn-primary save">Save changes</button> 
<a class='btn btn-primary btn main' data-direction='top'>Modal</a> 

js:

$('.main').click(function() { 
    $('#modal1').modal(); 


}); 
$('.save').click(function(){ 
    $('#modal1').modal('hide');//hide the first modal 
    var returnedvalue = $('#modalvalue').val(); 
    $('#Response').text(returnedvalue); 
    $('#modal2').modal(); 
}); 

http://jsfiddle.net/0zw7r1r5/

Answer 3

Die einfachste Möglichkeit zur Lösung dieses Problems besteht darin, den Rest der Funktion in einem Ereignis-Listener auszuführen auf dem ersten Modal. Ändern Sie Ihre Funktion, kam ich mit auf den Punkt:

$('#opener').click(function() { 
    $('#modal1').modal(); 
    $('#modal1').on('hidden.bs.modal', function (e) { 
    var returnedvalue = $('#modalvalue').val(); 
    $('#Response').text(returnedvalue); 
    $('#modal2').modal(); 
    }); 
}); 

ich Ihre Haupttaste verändert auch eine ID zu haben, so dass Ihr Event-Listener auf Elemente mit der .btn Klasse für alle Klicks nicht zuhörte.

<a id="opener" class='btn btn-primary' data-direction='top'>Modal</a> 

Sie können diese Arbeiten sehen in this jsfiddle

Answer 4

Sie müssen zuerst $ ('# modal1') verwenden modal(). wenn working.then Verwendung Code unten in Bildschirm klicken nach modal1 Taste zeigt modal2

$('.btn').click(function() { 
    $('#modal1').modal(); 

}); 

$('#modal1 .btn-primary').click(function(){ 

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

    var returnedvalue = $('#modalvalue').val(); 
    $('#Response').text(returnedvalue); 
    $('#modal2').modal(); 
}) 

Answer 5

try Anruffunktion zu zeigen, dann verwenden, um in model.if Funktion Rückruf:

$('.btn').click(function() { 
 
     $('#modal1').modal('show', function (data) { 
 
      var returnedvalue = data; 
 
      if (data == 'yourvalue') 
 
      { 
 
       $('#modal2').modal('show'); 
 
       $('#Response').text(returnedvalue); 
 
      } 
 
      
 
      
 
     }); 
 
     
 
    });

Answer 6

Der Code, den Sie möchten.

$('.btn').click(function() { 
 
    $('#modal1').modal(); 
 
    
 
}); 
 

 

 
function showModel2(){ 
 
\t var returnedvalue = $('#modalvalue').val(); 
 
    $('#Response').text(returnedvalue); 
 
    $('#modal2').modal(); 
 
}

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

 
<div id="modal1" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Modal 1</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <input type="text" id="modalvalue"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary" onclick="showModel2()">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 

 
<div id="modal2" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Modal 2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <h3> 
 
      Response from Modal1: <span id="Response"></span> 
 
     </h3> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 

 

 

 

 
<a class='btn btn-primary btn' data-direction='top'>Modal</a>