Search code examples
javascriptjqueryzurb-foundationzurb-foundation-5

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


Let's say I have a button that opens a modal with some info, and that modal contains a button to a open a second modal. Let's say the first modal contains some terms or licensing, and after the user accepts it, I don't want it to appear again. So I would change the data-reveal-id of the button that opened the first modal so it directly opens the second modal. This way, if the user closes the second modal, clicking the starting button only opens the second modal.

Here's the code for this example. Assume JQuery and Foundation are included and everything is properly initialized.

<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>

Unfortunately, this does not work. Upon clicking the button openFirstModal after the data-reveal-id has changed, the first modal still appears. Is this a known issue, and is there a way around this?

Edit: I now have a fiddle (http://jsfiddle.net/wy6mj790/) and an open issue on Github (https://github.com/zurb/foundation-sites/issues/7772)


Solution

  • This is not possible in Foundation 5. See exchange on the Github issue here: 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.