파운데이션 6 중첩 된 공개가 멀티플 오픈을 준수하지 않음

Question

저는 Angular2와 함께 Foundation 6을 사용하고 있고, Reveal 모달 몇 개를 순서대로 열어야합니다. Zurb의 예제를 직접 복사했지만 첫 번째 모달에서 버튼을 클릭하면 새 모달이 열리 며 첫 번째 모달은 닫히지 않습니다.

multipleOpened의 기본값은 false 여야하지만 서로 위에 열어야합니다.

Screenshot

나는 data-multiple-opened="false"도 data-options="multipleOpened:false;" 설정을 시도했지만, 서로 상단에 그들은 여전히 ​​열려.

이

<p><a data-open="exampleModal2">Click me for a modal</a></p> 

<!-- This is the first modal --> 
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;"> 
    <h1>Awesome!</h1> 
    <p class="lead">I have another modal inside of me!</p> 
    <a class="button" data-open="exampleModal3">Click me for another modal!</a> 
    <button class="close-button" data-close aria-label="Close reveal" type="button"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
</div> 

<!-- This is the nested modal --> 
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;"> 
    <h2>ANOTHER MODAL!!!</h2> 
    <button class="close-button" data-close aria-label="Close reveal" type="button"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
</div> 

사람이 올바른 방향으로 날 포인트 : 여기

내 코드?

Answer 1

나는 이것이 당신이 후에있는 효과가 있는지 확실하지 않습니다,하지만 당신은 두 번째 시작 버튼에 data-close를 추가하여 첫 번째 모달의 폐쇄를 강제 할 수

<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a> 

JSFiddle example