Launch second Reveal Modal via Ajax (Zurb Foundation 5 + WordPress)

Question

I'm using Foundation 5 & WordPress.

I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.

I have two divs at the bottom of my page:

<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>

I launch the first modal with content from another page (so far so good):

<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">

First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):

<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">

Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.

Any idea what I'm doing wrong?

jaycode jaycode · Accepted Answer · 2014-03-08T21:32:06

You need to call the second modal using javascript on ajax returned modal page.

Try this:

Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):

  <div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>

Then set event handler for links inside your current modal:

      $('a.linksinsideyourmodal').click(function(e) {
        $('#modal-anotherPage').foundation('reveal', 'open', {
          url: $(this).attr('href')
        });
        return false;
      });

Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.

Launch second Reveal Modal via Ajax (Zurb Foundation 5 + WordPress)

2 Answers