Menu icon Foundation
Launch Second Reveal Modal via AJAX

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.

Page 1
I have two divs at the bottom of my page to store modal 1 & modal 2.

    <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 Modal 2 from the AJAX loaded content which is currently in Modal 1.

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

Unfortunately, now I am simply taken to the new page. The content is not loaded into Modal 2.

I've tried adding the #portfolioModal div (Modal 2) on the original page, and on the page loaded into Modal 1. In neither case is the third page loaded into Modal 2. I cannot get Modal 2 to open.

Any idea what I'm doing wrong?

Foundation 5AJAXwordpressrevealmodal

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.

Page 1
I have two divs at the bottom of my page to store modal 1 & modal 2.

    <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 Modal 2 from the AJAX loaded content which is currently in Modal 1.

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

Unfortunately, now I am simply taken to the new page. The content is not loaded into Modal 2.

I've tried adding the #portfolioModal div (Modal 2) on the original page, and on the page loaded into Modal 1. In neither case is the third page loaded into Modal 2. I cannot get Modal 2 to open.

Any idea what I'm doing wrong?

This post has been closed. No new replies can be added.

Chris Anderson almost 6 years ago

Juan: I tried that solution but it didn't work.

I opened a ticket with the fine folks at Zurb. Apparently that functionality wasn't actually built into the code, but they went ahead and added it to their master file. I updated my foundation files with the most recent master and voila -- second reveal modal pulling ajax content.

I did not even need to adjust my markup any.

Thanks Zurb!

Juan Carlos Salazar Pardo almost 6 years ago

I was having this same problem. Apparently, you have to initialize foundation again after the reveal modal is opened so that the links to the new modal work as intended:

 $(document).on('opened', '[data-reveal]', function() {
        $(document).foundation();
      });