2016-07-25 28 views
1

Ich habe zwei Modal mit ID1 und ID2 und ich möchte eines der modalen je nach dem Zustand der Paddel-Schalter öffnen. Wenn Schalter in 'Off-Zustand' ist, muss Modal mit ID 'ID1' geöffnet werden und wenn der Schalter eingeschaltet ist, muss Modal mit der ID 'id2' geöffnet werden. Momentan habe ich beim 'onChange' Event die ID von modal hinzugefügt, die für 'data-open' und 'aria-controls' Attribut geöffnet werden muss.Bootstrap Modal Switching

$('#button-id1').attr('data-open', 'id1'); 
$('#button-id1').attr('aria-controls', 'id2'); 

Aber das funktioniert nur für das erste Mal, als ich den geöffneten modalen geschlossen, das Paddel Schalt zeigt die zuvor modal geöffnet. Kann mir jemand eine Idee geben, was hier läuft?

Antwort

0

Versuchen Sie, diese

$('#id1').modal("hide"); 

Es ist in der if-Anweisung sein soll, wenn der Schalter im Ein-Zustand Wähler-ID Ihres modalen soll die modal Sie wollen seine sonst verstecken oder zu entfernen ist der Aus-Zustand

if(switch_button == on_state){ 
    $('#id1').modal("show"); 
    $('#id2').modal("hide"); 
}else{ 
    $('#id1').modal("hide"); 
    $('#id2').modal("show"); 
} 

Wenn Sie verwirrt, welche Bedingung Sie setzen müssen. nur wenn der Schalterknopf, wenn es eine Klasse geöffnet ist, oder was auch immer

if($('#switch_button').hasClass('open')){} 

Wenn Sie nicht wollen, direkt die Modal öffnen, wenn der Schalter geändert wird man es in der if-Anweisung

if(switch_button == on_state){ 
    $('button1 of the first modal').click(function(){ 
     $('#id1').modal("show"); 
     $('#id2').modal("hide"); 
    }); 
}else{ 
    $('button2 of the second modal').click(function(){ 
     $('#id1').modal("hide"); 
     $('#id2').modal("show"); 
    }); 
} 

ändern und Stellen Sie sicher, dass Sie modal eine Klasse von modal-lg für große modal-md für mittlere und modal-sm für kleine haben, um zu sehen, dass Ihr Modal in unterschiedlicher Größe ist.

<!-- Large Modal Format --> 
     <div class="modal fade" id="large" tabindex="-1" role="dialog" aria-hidden="true"> 
      <div class="modal-dialog modal-lg"> 
       <div class="modal-content"> 
        <!-- Modal Content Here --> 
       </div> 
      </div> 
     </div> 

     <!-- Medium Modal Format --> 

     <div class="modal fade" id="medium" tabindex="-1" role="dialog" aria-hidden="true"> 
      <div class="modal-dialog modal-md"> 
       <div class="modal-content"> 
        <!-- Modal Content Here --> 
       </div> 
      </div> 
     </div> 

     <!-- Small Modal Format --> 
     <div class="modal fade" id="small" tabindex="-1" role="dialog" aria-hidden="true"> 
      <div class="modal-dialog modal-sm"> 
       <div class="modal-content"> 
        <!-- Modal Content Here --> 
       </div> 
      </div> 
     </div> 
     <!-- End Modal --> 
+0

Ich kann Modal nicht sofort nach dem Wechsel des Schaltzustands öffnen, ich habe einen anderen Knopf, der Modal öffnet. Das Problem ist, dass der Button nicht immer modal anzeigt, sondern nur zum ersten Mal. – suresh726

+0

Was ist übrigens der Unterschied zwischen den beiden Modalitäten? –

+0

Sie sind zwei völlig verschiedene Modale wie eins ist "School Form Modal" und ein anderes ist "College Form Modal". – suresh726