使用具有多个实例的magnific popup灯箱

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>