我正在尝试将 Dmitry Semenov 的 PhotoSwipe ( link ) 与其 Magnific Popup ( link ) 的 Ajax Type 结合起来。更具体地说，我的 index.html 文件上有一个链接。单击后，将显示一个 Ajax 类型 放大弹出窗口，其中显示 other.html 的内容。在此弹出窗口中(即在 other.html 文件中)是一个 PhotoSwipe 图像库。当我单击图像时，PhotoSwipe 画廊会按预期显示，并且工作正常。但是，当我单击关闭按钮(“x”图标)或按 ESC 键时，PhotoSwipe 和放大弹出窗口都会关闭。如何更改此行为以便仅关闭 PhotoSwipe 弹出窗口？有没有办法在显示 PhotoSwipe 弹出窗口时“禁用”放大弹出窗口，以便在关闭 PhotoSwipe 之前放大弹出窗口不会响应任何单击或按键操作？
我只有非常基本的 JavaScript 知识，因此我非常感谢“手持式”答案。
最佳答案
我通过结合 Magnific 和 Colorbox 做了类似的事情。 Magnific 能够覆盖其代码的某些部分，而无需更改源代码，如 documented in the FAQ 。就我而言，它看起来像这样:
// Prevent "Escape" from closing Magnific popup when Colorbox popup is open
$.magnificPopup.instance.close = function() {
if ($("#colorbox").is(":visible")) {
// Don't do anything with Magnific if Colorbox is doing its thing
return false;
} else {
// Do what it would normally do
$.magnificPopup.proto.close.call(this);
}
};
您应该将 if 测试更改为 PhotoSwipe 特定的内容。也许用 if ($(".pswp--open").length > 0) { 替换该行会起作用。 (JavaScript 计算(通过 jQuery)带有 pswp--open 类的元素数量，至少从 PhotoSwipe 演示来看，该类似乎是添加到标记中的类当它打开时。)
关于javascript - 将 PhotoSwipe 与放大弹出窗口相结合(Ajax 类型)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37868600/