tryfoundation_modal_nested2 在线代码实例

 <div style="padding:20px;">
  <h2>内嵌模态框</h2>
  <!-- 触发模态框 -->
  <button type="button" class="button" data-reveal-id="myModal">点击打开模态框</button>

  <!-- 第一个模态框 -->
  <div id="myModal" class="reveal-modal" data-reveal="">
    <h2>第一个模态框</h2>
    <p>点击以下按钮会打开一个新的模态框。如果打开新的模态框，那么第一个模态框就会被关闭。</p>
    <p><a href="#" data-reveal-id="secondModal" class="button success" style="text-decoration:none;">打开第二个模态框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal="" data-options="multiple_opened:true;">
    <h2>第二个模态框</h2>
    <p>第二个模态框，第一个模态在第二个模态框下面，并没有关闭。</p>
   
    <a class="close-reveal-modal">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>