华丽的弹出窗口在shopify中不起作用答案

【问题标题】：magnific popup not working In shopify华丽的弹出窗口在shopify中不起作用
【发布时间】：2017-07-28 10:27:18
【问题描述】：

我正在使用 shopify 网站自定义 magnific popup。在我的 header.liquid 文件中，我正在调用 magnific popup 内容。

<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
  popup  content here.
</div>

这里我在 theme.js.liquid 中添加了脚本

$('#open-popup').magnificPopup({
  items: [
    {
      src: '#my-popup',
      type: 'inline'
    }
  ],
  gallery: {
    enabled: true
  },
  type: 'image'
});

但它显示以下错误

TypeError: $(...).magnificPopup is not a function

如果有人请告诉我我是否错过了类似 js 库文件的内容。

提前致谢。

【问题讨论】：

标签： javascript jquery shopify magnific-popup shopify-app

【解决方案1】：

我发现了这个问题的实际问题。一些主题在 theme.js.liquid 文件中有默认的放大弹出库。

我的新主题 brooklyn 已经有了华丽的弹出库。所以它现在运行良好。

因此，请检查 theme.js.liquid 文件是否存在大量弹出库。

【讨论】：

【解决方案2】：

您确定包含 jQuery 吗？如果是，是在magnificPopup之前导入的吗？

【讨论】：

【解决方案3】：

即使 magnificPopup 代码包含在我的 theme.js 中，我也遇到了类似的问题。

不要问我为什么 - 在 window.onload 中包装了 magnificPopup 调用后，它开始工作了。

<script>
window.onload = function() {

  $('.open-popup').magnificPopup({
    type:'inline',
    midClick: true
  });
}

【讨论】：