Foundation 6 Nested Reveal doesn't respect multipleOpened

Question

I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.

The default value for multipleOpened should be false, but they just open on top of each other.

Screenshot

I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.

Here is my 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>

Can anyone point me in the right direction?

Answer 1

I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:

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

JSFiddle example