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>

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

编辑：我现在有一个小提琴（http://jsfiddle.net/wy6mj790/）和Github上的一个未解决的问题（https://github.com/zurb/foundation-sites/issues/7772）

Answer 1

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

不幸的是，Reveal没有足够的灵活性，无法满足您的需求。

当data-reveal-id被更改时，基础重排不起作用

1 个答案: