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>