使用具有多个实例的放大弹出灯箱答案

【问题标题】：Using magnific popup lightbox with multiple instances使用具有多个实例的放大弹出灯箱
【发布时间】：2016-11-15 10:11:35
【问题描述】：

我正在使用 jQuery 插件 magnific popup 在我网站上的每个acticles 预览中将附加内容显示为一个简单的灯箱。

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

知同页显示的文章列表/弹窗编号不固定。

有什么方法可以区分同一页面的每个弹出窗口吗？

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>

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

【问题讨论】：

标签： javascript jquery popup magnific-popup

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

【讨论】：