通过Ajax(Zurb Foundation 5 WordPress)启动第二次模态

Question

我正在使用Foundation 5＆amp;WordPress。

我正在尝试从Ajax加载的揭示模态启动第二个揭示模式。它对我不起作用。

我的页面底部有两个divs：

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

我启动了第一个模式，其中包含另一个页面的内容（到目前为止很好）：

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

首先正确揭示了模态作品。然后，我尝试启动第二种模式（从第一个Ajax加载内容）：

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

现在，我只是被带到新页面。内容未加载到第二模式中。我尝试在原始页面上以及加载到第一个模式的页面上添加#PortFoliomodal Div。在两种情况下，第三页都加载到第二模式中。

知道我做错了什么？

Answer 1

您需要使用AJAX返回模态页面上的JavaScript调用第二种模式。

尝试以下操作：

首先在文档中的某个地方添加第二种模态包装器（您无法重复使用当前打开的模式）：

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

然后设置当前模式内链接的事件处理程序：

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

请注意，这仅适用于Foundation 5.2.0，它以某种方式不想在第二模式上返回Ajax内容。

Answer 2

您的问题可能是

<?php the_permalink(); ?> 

返回使用" http：//"的地址。

揭示无法正确使用该地址。揭示仅将AJAX与相对URL一起使用，而不是绝对的URL，并且仅在引用同一服务器上的文件时才能使用。