Question

我正在使用Magnific Popup插件在具有图库页面的网站上工作。客户已经带回了关于每张图片的巨大“字幕”（更像是故事）。

我在MFP中使用了标题功能来创建和显示标题。但我需要显示/隐藏标题，作为一个直接放在图像上的绝对位置的图层。

我已经完成了所有这些 - 将MFP js文件修改为在一个名为 mfp-description 的div中写入 - 当点击它时，应该使用向标题div添加一个新类显示块 - 但我在图像窗口内创建的按钮没有任何效果。我猜在MFP脚本中的某些东西正在停止这个但是我无法弄明白...

Page在这里：

http://www.kindledesign.co.uk/strand/gallery.php

显示的代码：

SELECT distinct r.ID,a.Name as ArticleName,
       sum(distinct a.Amount) as ArticlesAmount,
       substr(r.City,1,3) as ToCityName 
FROM Reservations r 
INNER JOIN Articles a 
      on r.Id = a.ReservationId 
WHERE  a.Name <> '' 
GROUP BY ToCityName,a.ArticleId,a.Name 
ORDER BY ToCityName ASC

要显示的CSS：

$(".mfp-content").click(function() {
var target = $( event.target );
if (target.is(".mfp-description")) {
$(this).addClass("visible");
};
});

所有帮助非常感谢！感谢

Answer 1

听起来您正试图将click事件绑定到您的.mfp-title，然后它才会显示在页面上。

您需要：

在弹出窗口初始化后运行自定义JavaScript （查看API section of the docs中可用的回调）。

修改您的点击事件，使其不依赖于DOM中现有的元素。

对于（2），它看起来像：

$(document.body).on('click', '.mfp-description', function(e) { $(this).parent().find('.mfp-title').toggleClass('visible'); });

您提到您自定义了您的Magnific版本。我会避免直接修改插件代码：它将使调试变得困难并在将来更新时会感到痛苦。使用插件内置的回调（即在Magnific的beforeOpen或open事件中添加标记）。

Magnific Popup内的按钮（不关闭）

1 个答案: