복수 버번 리필 모달

Question

버번 리필 UI 요소를 사용하는 레이아웃이 있는데 모달에 관한 질문이 있습니다. 더 구체적으로 말하자면, 한 번에 여러 개의 모달을 열어야하는 경우가 있습니다.

그래서 ... 이것은 정상적인 Bourbon 리필 모달을 여는 버튼을 클릭합니다. 이 모달 내에서 사용자는 단추를 클릭하여 추가 설정 모달을 여는 옵션을 갖습니다.

현재 하나의 기본 모달과 하나의 중첩 된 모달이 있습니다. 안타깝게도 중첩 된 모달은 Webkit 및 Gecko 브라우저의 첫 번째 경계 내에서 제한됩니다. IE에서 ... 그것은 전혀 아닙니다 : (

리필을 사용하여 이것을 제거하는 다른 방법이 있습니까? 저는 생각했습니다 ... 버튼에 클릭 이벤트를 할당하여 두 번째 (별도) 첫 번째 Z- 인덱스의 순서의 상단에 앉아 것 모달 당신의 도움에 미리

감사합니다 -.. 어떤 감사

<div class="modal"> 

     <label for="modal-1"> 
      <div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div> 
     </label> 
     <input class="modal-state modal-state-a" id="modal-1" type="checkbox" /> 
     <div class="modal-fade-screen modal-fade-a"> 
      <div class="modal-inner"> 
      <div class="modal-close modal-close-a" for="modal-1"></div> 
      <h2>Modal 1 Title</h2> 
      <label>Input Label</label> 
      <input value="Input" /> 

      <!-- Begin Nested Modal 2 --> 

       <div class="modal"> 
       <label for="modal-2"> 
        <div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div> 
       </label> 
       <input class="modal-state modal-state-b" id="modal-2" type="checkbox" /> 
       <div class="modal-fade-screen modal-fade-b"> 
        <div class="modal-inner"> 
        <div class="modal-close modal-close-b" for="modal-2"></div> 
        <h2>Modal 2 Title</h2> 
        <label>Input Label</label> 
        <input value="Input" /> 
        </div> 
       </div> 
       </div>  

      <!-- End Nested Modal 2 --> 

      </div> 
     </div> 
     </div> 

Answer 1

OK, 나는 틀림를, 그것을 생각이 저를 던졌다 이는 JS 기반의 모달이 아니기 때문에 약간은 숨겨진 체크 박스와 형제 요소 (이 경우에는 < 라벨>)를 기반으로 한 요소의 스타일을 사용하는 데 의존합니다.

Easy-peasy. 우리가해야할 일은 모달을 분리하고 : checked 상태를 열고 싶은 모달의 숨겨진 체크 박스에 지정하는 것뿐입니다. 예 :

먼저 평소처럼 모달을 분리하십시오. 그런 다음 Modal 1에서 Modal 2를 열기 위해 사용자가 클릭 할 링크/버튼을 만듭니다. 인수를 위해 #update ID를 부여합니다. 이제

  <div class="modal"> 
      <label for="modal-2"> 
       <div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div> 
      </label> 
      <input class="modal-state modal-state-b" id="modal-2" type="checkbox" /> 
      <div class="modal-fade-screen modal-fade-b"> 
       <div class="modal-inner"> 
       <div class="modal-close modal-close-b" for="modal-2"></div> 
       <h2>Modal 2 Title</h2> 
       <label>Input Label</label> 
       <input value="Input" /> 
       </div> 
      </div> 
      </div>  

<div class="modal"> 
    <label for="modal-1"> 
     <div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div> 
    </label> 
    <input class="modal-state modal-state-a" id="modal-1" type="checkbox" /> 
    <div class="modal-fade-screen modal-fade-a"> 
     <div class="modal-inner"> 
     <div class="modal-close modal-close-a" for="modal-1"></div> 
     <h2>Modal 1 Title</h2> 
     <label>Input Label</label> 
     <input value="Input" /> 
     <a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2--> 

     </div> 
    </div> 
    </div> 

... 할당하는 jQuery를 약간 쓰기 : 적절한 모달 상태를 확인.

$("#update").click(function() { 
    var modalTrigger = $("input#modal-2"); 
    modalTrigger.prop("checked", !modalTrigger.prop("checked")); 
}); 

완료. 이제 두 번째 모달이 첫 번째 모달에 올바르게 열립니다. 방금 테스트했는데 IE9-11을 포함한 대부분의 브라우저에서 작동합니다. 기본 리필 모달과 다른 점이 없기 때문입니다.