Foundation 6 Nested Reveal respektiert nicht multipleOpened

Question

Ich benutze Foundation 6 mit Angular2, und ich habe ein paar Reveal-Modale, die in einer Sequenz geöffnet werden müssen. Ich habe das Beispiel direkt aus Zurb kopiert, aber wenn ich im ersten Modal auf den Button klicke, öffnet sich das neue Modal und das erste schließt sich nicht.

Der Standardwert für multipleOpened sollte falsch sein, aber sie öffnen sich einfach übereinander.

Screenshot

Ich habe versucht, data-multiple-opened="false" Einstellung und auch data-options="multipleOpened:false;", aber sie offen noch auf der jeweils anderen.

Hier ist mein Code:

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

Kann mir jemand in die richtige Richtung?

Answer 1

Ich bin mir nicht sicher, ob dies der Effekt ist Sie nach, aber Sie können das Schließen des ersten modalen erzwingen, indem data-close auf die Schaltfläche Hinzufügen, dass der zweite startet:

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

JSFiddle example