导航到其他页面后不显示放大的弹出窗口

Question

我在 Magnific 弹出窗口中遇到了一个奇怪的问题。我有两个单独的页面，其中包含指向同一个启用 Magnific 的弹出窗口的链接。

1. 单击第 1 页上启用放大的链接--- 弹出窗口出现。关闭弹出窗口并再次单击也可以正常工作。
2. 单击第 1 页上的链接可转到第 2 页。
3. 单击第 2 页上启用了 mangific 的链接 --- 弹出窗口没有出现。
4. 为第 2 页重新加载浏览器。
5. 单击第 2 页上启用放大功能的链接 --- 弹出窗口。关闭弹出窗口并再次单击也可以正常工作。
6. 单击第 2 页上的链接可转到第 1 页。
7. 单击第 1 页上启用放大功能的链接 --- 弹出窗口未出现。
8. 为第 1 页重新加载浏览器。
9. 单击第 1 页上启用放大的链接--- 弹出窗口出现。关闭弹出窗口并再次单击也可以正常工作。
10. 从第 2 步开始重复。

我将fixedContentPos 选项设置为true，因此当弹出窗口出现时背景不会滚动。在我上面概述的每个实例中，弹出窗口没有出现，背景不会滚动好像弹出窗口在那里。我查看了检查器，看到附加的 overflow:hidden 属性正在停止背景滚动。但是，弹出式 DOM 元素不存在。

顺便说一句，这是一个 Rails 网站。我在静态版本上测试了相同的 Javascript 代码，它按预期工作，所以我想知道这是否与 Rails 处理路由的方式有关？

任何帮助将不胜感激！

Answer 1

我猜你启用了 Turbolinks（它只通过替换内容来加快页面加载速度，但不会触发 $(document).ready() ）

你应该像这样绑定你的图片链接：

$(document).on('ready page:load', function(event) {
  $('.test-popup-link').magnificPopup({ ...});
});

或禁用涡轮链接