Magnific Popup 内的按钮（未关闭）

Question

我正在使用 Magnific Popup 插件开发一个有画廊页面的网站。客户回来时带回了关于每张图片的大量 'captions'（更像是故事）。

我使用了多功能一体机中的标题功能来创建和显示标题。但我需要 SHOW/HIDE 标题，作为直接放置在具有绝对位置的图像上的图层。

我已准备好所有这些 - 修改了 MFP js 文件以写入名为 mfp-description 的 div - 单击时应添加标题 div 的新 class 和 显示块 - 但是我在图像中创建的按钮 window 没有任何效果。我猜 MFP 脚本中的某些东西正在阻止它，但我不知道是什么...

页面在这里：

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

要显示的代码：

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

CSS 显示：

.mfp-title {
text-align: left;
font-size: .9em;
line-height: 1.3em;
color: #333;
word-wrap: break-word;
padding: 1em 40px 1em 1em; 
background: white;
position: absolute;
bottom: 100%;
display: none;
}
.mfp-title.visible {
display: block;
}

非常感谢所有帮助！谢谢

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 内的按钮（未关闭）

Button inside Magnific Popup (not close)

javascript

css

jquery

magnific-popup