Question

我正在使用jQuery插件magnific popup在我网站的每个预览中显示其他内容作为一个简单的灯箱。

第一个弹出窗口有效，但所有其他实例都会打开第一个实例内容。

知道同一页面上显示的文章列表/弹出数字不固定。

有没有办法区分同一页面上的每个弹出窗口？

HTML

<a id="pop" class="popup-with-zoom-anim" href="#small-dialog">More content</a>

<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
.. PHP generated content ..
</div>

JS

$('.popup-with-zoom-anim').magnificPopup({
  type: 'inline',   
  fixedContentPos: false,
  fixedBgPos: true,      
  overflowY: 'auto',
  closeBtnInside: true,
  preloader: true,            
  midClick: true,
  removalDelay: 300,
  mainClass: 'my-mfp-zoom-in'
});

Answer 1

我刚刚找到了办法。对于阅读此内容的任何人：

您只需为每个弹出窗口创建一个唯一的名称。

<a id="pop" class="popup-with-zoom-anim" href="#unique-variable">More content</a>

<div id="unique-variable" class="zoom-anim-dialog mfp-hide">
.. PHP generated content ..
</div>

使用具有多个实例的大型弹出式灯箱

1 个答案: