Foundation 6 Nested Reveal не учитывает множественные открытые

Question

Я использую Foundation 6 вместе с Angular2, и у меня есть пара модальностей Reveal, которые нужно открыть последовательно. Я скопировал пример из Zurb напрямую, но когда я нажимаю кнопку в первом модале, открывается новый модал, а первый не закрывается.

Значение по умолчанию для множественного открытия должно быть ложным, но они просто открываются друг на друга.

Скриншот

Я пытался установить 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