加载动态html的巨大ajax弹出窗口

时间:2014-12-03 17:42:42

标签: jquery ajax magnific-popup

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

我可以使用magnific popup用静态html进行内联和ajax但是无法使用动态html。

我希望使用大胆的弹出框来加载带有http://xxx.xxx.xxx.xxx/test.html?activityid=22等参数的html,test.html将显示该activityid的标题和图片。如果我将该网址复制并粘贴到浏览器中,我可以加载具有正确标题和图片的页面。但是巨大的弹出窗口无法加载正确的标题和图片,只加载默认的标题和图片。在我看来,信息“activityid = 22”没有通过。你知道这样做的好方法吗?请帮忙。

HTML:

 <a class="simple-ajax-popup-align-top" href="test.html?activityid=22">open_popup</a>

Jquery的:

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

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

1 个答案:

答案 0 :(得分:0)

我正在尝试使用极大的弹出窗口加载JSP页面(相同的原点),但它不起作用。

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

<强> JS

$('.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