通过 Ajax (Zurb Foundation 5 + WordPress) 启动第二个 Reveal Modal答案

【问题标题】：Launch second Reveal Modal via Ajax (Zurb Foundation 5 + WordPress)通过 Ajax (Zurb Foundation 5 + WordPress) 启动第二个 Reveal Modal
【发布时间】：2014-02-22 00:12:00
【问题描述】：

我正在使用 Foundation 5 和 WordPress。

我正在尝试从加载 AJAX 的 Reveal Modal 启动第二个 Reveal Modal。它不适合我。

我的页面底部有两个 div：

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

First Reveal Modal 工作正常。然后我尝试启动第二个模式（从第一个 AJAX 加载的内容）：

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

现在我只是被带到了新页面。内容未加载到第二个模式中。我尝试在原始页面上添加#portfolioModal div，并在加载到第一个模式的页面上。在这两种情况下，第三个页面都不会加载到第二个模式中。

知道我做错了什么吗？

【问题讨论】：

标签： ajax wordpress modal-dialog zurb-foundation

【解决方案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;
      });

请注意，这只适用于基础版本 5.2.0，它之前的版本不希望在第二个模式上返回 ajax 内容。

【讨论】：

【解决方案2】：

你的问题可能是这样的

<?php the_permalink(); ?>

返回带有“http://”的地址。

Reveal 不会正确使用该地址。 Reveal 将只使用带有相对 URL 的 ajax，而不是绝对 URL，并且它仅在引用同一服务器上的文件时才有效。

【讨论】：