2016-07-25 22 views
1

저는 id1과 id2가있는 두 개의 모달을 가지고 있으며 패들 스위치의 상태에 따라 모달 중 하나를 열려고합니다. '꺼짐'상태 일 때 'id1'ID가있는 모달을 열어야합니다 스위치가 'on-state'상태 일 때 id가 'id2'인 모달을 열어야합니다. 현재 'onChange'이벤트에서 'data-open'및 'aria-controls'속성을 열어야하는 모달 ID를 추가하고 있습니다. 나는 열려있는 모달 닫을 때이 패 전환, 단지 처음 작동하고부트 스트랩 모달 전환

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

하면 이전에 모달 열어 보여줍니다. 아무도 나에게 여기에 무슨 생각을 줄 수 있습니까?

답변

0

스위치가 모달의 선택의 ID를 숨기거나 다른 제거 할 모달해야 온 상태 일 때이

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

그것은이 if 문에 있어야 시도는 오프 상태

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

당신이 둬야하는 조건이 혼란 스럽다면. 단지의 경우 클래스 열거 나 스위치가 변경 될 때 직접 모달을 열고 싶지 않는 경우

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

당신이 내부를 수정 if 문

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"); 
    }); 
} 

그리고 수있는 것은 무엇이든지있을 경우 스위치 버튼 모달에 대형 모달의 경우 모달 -lg, 중간 모달의 경우 -md, 모달의 경우 작은 모달의 모달이 있는지 확인하여 모달이 크기가 다른 것을 확인하십시오.

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

스위치 상태가 변경된 후 곧바로 모달을 열 수 없으며 모달을 여는 또 다른 버튼이 있습니다. 문제는 버튼이 항상 스위치 상태에 따라 모달을 보이고있는 것이 아니라 처음 작동하는 것입니다. – suresh726

+0

그런데 두 모달의 차이점은 무엇입니까? –

+0

그들은 하나의 'School Form Modal'과 'College Form Modal'과 같이 전혀 다른 두 모달입니다. – suresh726