更改数据显示 ID 时基础回流不起作用

Question

假设我有一个按钮可以打开带有一些信息的模态，并且该模态包含一个用于打开第二个模态的按钮。假设第一个模式包含一些条款或许可，在用户接受后，我不希望它再次出现。所以我会更改打开第一个模式的按钮的 data-reveal-id，以便它直接打开第二个模式。这样，如果用户关闭第二个模态，单击开始按钮只会打开第二个模态。

这是此示例的代码。假设包含 JQuery 和 Foundation 并且一切都已正确初始化。

<a href="#" id="openFirstModal" data-reveal-id="firstModal" class="radius button">Open modal</a>

<!-- Modal 1 -->
<div id="firstModal" class="reveal-modal" data-reveal role="dialog">
  <h2 id="firstModalTitle">This is a modal with some terms to accept.</h2>
  <p><a id="firstModalButton" href="#" data-reveal-id="secondModal" class="secondary button">Accept and open second modal</a></p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<!-- Modal 2 -->
<div id="secondModal" class="reveal-modal" data-reveal role="dialog">
  <h2 id="secondModalTitle">This is a second modal.</h2>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<script>
    $('#firstModalButton').on('click', function(){
        $('#openFirstModal').attr('data-reveal-id', 'secondModal');
        $(document).foundation('reveal', 'reflow');
    });
</script>

不幸的是，这不起作用。在 data-reveal-id 更改后单击按钮 openFirstModal 时，第一个模式仍然出现。这是一个已知问题吗？有解决办法吗？

编辑：我现在有一个 fiddle (http://jsfiddle.net/wy6mj790/) and an open issue on Github (https://github.com/zurb/foundation-sites/issues/7772)

Answer 1

这在 Foundation 5 中是不可能的。请参阅此处关于 Github 问题的交流：https://github.com/zurb/foundation-sites/issues/7772

Unfortunately, Reveal isn't flexible enough out of the box to do what you are looking for.

更改数据显示 ID 时基础回流不起作用

Foundation reflow not working when data-reveal-id is changed

javascript

jquery

zurb-foundation

zurb-foundation-5