Zurb 基础嵌套显示模式关闭时所有弹出窗口关闭

Question

我正在使用 zurb 基础框架。我在主框架内嵌套了一个显示模式。当我关闭第二个模式时，主要的也关闭了。我想这是基金会嵌套模式如何工作的一种常见方式，因为我检查了文档并在他们的网站上发现了同样的问题。

无论如何我可以更改此默认功能。哪里只显示具有相关 id 的模态框会关闭？

目前：

点击时：

<a data-reveal-id="myModal_signupSubject" data-reveal><span  class="menuBox">Tutor Sign Up</span></a>

这会打开：

 <section id="myModal_signupSubject" class="reveal-modal text-center" data-reveal>
     <span class="titleOrange">Tutor Signup</span><br/>
     Step 1: Select Subjects and
     Set <span class="orange">Hourly </span>Prices 

     <a class="close-reveal-modal" id="insertSub">&times;</a>//closes this current reveal modal
      <a data-reveal-id="myModal_signup" data-reveal><input type="button" id="browse" value="Browse Subjects"></a>//invokes another reveal modal
   </section>

当点击上述模式中的链接时，会打开以下模式：

<section id="myModal_signup" class="reveal-modal text-center" data-reveal>
<a class="close-reveal-modal" id="closeNested">&times;</a>//this closes the current modal
 <span class="titleSpecial">Tutor Sign Up</span><br/>
 Step 1: Select Subjects and Set <span class="orange">Hourly</span> Prices<br/>
<a data-reveal-id="myModal_signupSubjects" data-reveal><span  id="searchLink"> <input type="button" id="browse" value="Browse Subjects"></span>

我尝试为每个模式提供 ID 并专门关闭它们，但它不起作用：

$(document).foundation();
  $('a.custom-close-reveal-modal#closeNested').click(function(){
  $('#myModal_signupSubject').foundation('reveal', 'close');
});

$(document).foundation();
  $('a.custom-close-reveal-modal#insertSub').click(function(){
  $('#myModal_signupSubject').foundation('reveal', 'close');
});

我还发现，每当单击嵌套的显示模式链接时，第一个模式会自动关闭，因此第二个会打开。

如何：

1) 让第一个模态在第二个模态关闭时自动重新打开？

Answer 1

这应该可以通过将 data-reveal-id 添加到第二个模式的关闭按钮来实现：

<a class="close-reveal-modal" href="#" data-reveal-id="id-of-first-modal">Close only 2nd modal</a>

Answer 2

您现在可以将data-multiple-opened="true" 添加到data-reveal 元素：

$(document).foundation();

body {
  padding: 2rem 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.motion.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.mediaQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.triggers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.keyboard.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.reveal.min.js"></script>
<!-- This demo uses flex grid but you can use float grid too -->

<div class="row">
  <div class="columns">
    <h2>Reveal - Nested Modal</h2>
    <p>It's possible for modals to open other modals. Create a second modal with a unique ID, and then add a click trigger with <code>data-open</code> inside the first modal.</p>
  </div>
</div>

<div class="row">
  <div class="columns">
    <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-multiple-opened="true">
      <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-multiple-opened="true">
      <h2>ANOTHER MODAL!!!</h2>
      <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>