加载动态 html 的华丽 ajax 弹出窗口答案

【问题标题】：magnific ajax popup loading a dynamic html加载动态 html 的华丽 ajax 弹出窗口
【发布时间】：2014-12-03 17:42:42
【问题描述】：

我是新来的华丽弹出窗口。如果问题有一个简单的答案，请原谅我。但我花了一些时间尝试不同的方法，但没有成功。

我可以使用 magnific popup 对静态 html 进行内联和 ajax，但不能让它与动态 html 一起使用。

我希望放大的弹出窗口加载带有 http://xxx.xxx.xxx.xxx/test.html?activityid=22test.html 等参数的 html 将显示该活动 ID 的标题和图片。如果我将该 url 复制并粘贴到浏览器中，我可以加载具有正确标题和图片的页面。但 magnific popup 无法加载正确的标题和图片，只加载默认的标题和图片。在我看来，信息“activityid=22”没有通过。你知道一个好的方法吗？请帮忙。

HTML：

 &lt;a class="simple-ajax-popup-align-top" href="test.html?activityid=22"&gt;open_popup&lt;/a&gt;

jquery：

$('.simple-ajax-popup-align-top').magnificPopup({
  type: 'ajax',
  alignTop: true,
  overflowY: 'scroll',
});

我也尝试过尝试设置 window.location.hash 等的 magnificPopup 回调，但没有奏效。感谢您的时间和帮助。

【问题讨论】：

你的simple-ajax-popup-align-top HTML 元素是什么样的？

标签： jquery ajax magnific-popup

【解决方案1】：

我正在尝试使用 magnific popup 加载 JSP 页面（同源），但它不起作用。

在 javascript 控制台中，我看到使用 ajax 加载内容后，插件导航到 JSP 页面。我看到一个弹出窗口有几分之一秒，然后我看到了新页面。

$('.simple-ajax-popup-align-top').magnificPopup({
  delegate: 'a',
  type: 'ajax',
  alignTop: true,
  overflowY: 'scroll',
  cursor: 'mfp-ajax-cur',
  tError: '<a href="%url%">The content</a> could not be loaded.'
});

home.jsp

<div class="simple-ajax-popup-align-top">
  <a href="${pageContext.request.contextPath}/info">Load content via ajax</a>
</div>

info.jsp（弹出内容）

<div id="custom-content" class="white-popup-block" style="max-width: 600px; margin: 20px auto;">
  ...my jsp content...
</div>

JS 控制台

XHR finished loading: GET "http://localhost:8080/test/info"

Navigated to http://localhost:8080/test/info

【讨论】：