使 Mailchimp 弹出窗口在点击 Jekyll/Github 页面时起作用

Question

尝试让 Mailchimp 的弹出式表单在我的 Jekyll Powered Github 页面上单击即可工作。

我遵循的步骤：

我在我的网站上创建了一个 link 来触发弹出窗口：
```
<a href="#" id="open-popup" onclick ="showMailingPopUp(); return false;">Join Newsletter</a>
```
以上内容位于我的导航栏 (masthead.html) 的 HTML 中。

然后我为 mailchimp 弹出代码 (newsletter.html) 创建了一个 HTML。是的，uuid 和 lids 被我自己的哈希值取代了

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
  function showMailingPopUp() {
    require(
      ["mojo/signup-forms/Loader"],
      function(L) {
        L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"myuuid","lid":"mylid"})
      }
    );

    document.cookie = "MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;";
    document.cookie = "MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  }

  document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

调用 newsletter.html 并在 </body> 之前添加到 masthead.html 包含：
```
{% include newsletter.html %}
```
以上都没有运气:-(

关于如何修复它的任何指示？

Answer 1

您的 javascript 加载顺序有问题。 Jquery 在您的时事通讯代码之后加载，这就是导致错误的原因。

删除 _includes/masthead.html

{% include newsletter.html %}

在layout/default.html中添加{% include newsletter.html %}，就在收尾前</body>

而且有效！

奖励：您还可以删除 _includes/masthead.html[=31 中额外的 <body> 和 </body> 标签=]

使 Mailchimp 弹出窗口在点击 Jekyll/Github 页面时起作用

Making Mailchimp pop-up work on-click for Jekyll/Github Pages

javascript

popup

jekyll

mailchimp

github-pages