title: Foundation 6 Nested Reveal doesn't respect multipleOpened
body: <p>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.</p>
  
  <p>The default value for multipleOpened should be false, but they just open on top of each other.</p>
  
  <p><a href="http://i.stack.imgur.com/W13a7.png" rel="nofollow">Screenshot</a></p>
  
  <p>I've tried setting <code>data-multiple-opened="false"</code> and also <code>data-options="multipleOpened:false;"</code>, but they still open on top of each other.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;p&gt;&lt;a data-open="exampleModal2"&gt;Click me for a modal&lt;/a&gt;&lt;/p&gt;
  
  &lt;!-- This is the first modal --&gt;
  &lt;div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;"&gt;
    &lt;h1&gt;Awesome!&lt;/h1&gt;
    &lt;p class="lead"&gt;I have another modal inside of me!&lt;/p&gt;
    &lt;a class="button" data-open="exampleModal3"&gt;Click me for another modal!&lt;/a&gt;
    &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;!-- This is the nested modal --&gt;
  &lt;div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;"&gt;
    &lt;h2&gt;ANOTHER MODAL!!!&lt;/h2&gt;
    &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone point me in the right direction?</p>