点击按钮淡出弹出窗口？

Question

我已按照本教程实施弹出式电子邮件简报注册，以添加到我的Shopify主题，该主题使用fancybox.js和cookie.js。 一切正常，除非您输入电子邮件地址并单击“注册”，即使打开其他选项卡以完成Mailchimp注册过程，在原始商店选项卡上，电子邮件弹出窗口保持打开状态，好像没有任何更改。

我想知道是否有一种方法可以调整代码，以便在点击“注册”时，新标签正常打开但电子邮件弹出窗口淡出，所以当用户返回商店时，弹出窗口已消失。 我对JS不太好，所以任何帮助都会非常感激！

我目前的代码：

theme.liquid -

液体HTML：

{% if settings.popup_newsletter_enable %}
  <div id="email-popup" style="display: none;" >
   {% include 'popup-newsletter-form' %}
  </div>

  <a href="#email-popup" id="trigger"></a>
{% endif %}

JS：

{{ 'jquery.fancybox.js' | asset_url | script_tag }}

<script type="text/javascript">
  (function($) {
    // set a variable for the cookie check
    var check_cookie = $.cookie('popup_box');

    // check whether the cookie is already set for this visitor
    if( check_cookie != 'active' ){
      // if the cookie does not exist do the following:

      // (1) set the cookie so it's there for future visits (including an expiration time in days)
      $.cookie('popup_box', 'active', { 
        expires: 3,
        path: '/'
      });

      // (2) trigger the fancybox pop up, specifying that it's inline
      $( '#trigger' ).fancybox({
        type: 'inline',
      });
      setTimeout(function () {
      $('#trigger').eq(0).trigger('click'); // make the click event happen on load
      }, 5000);
    }
  })(jQuery); // this is a noconflict wrapper for WP
</script>

popup-newsletter-form.liquid（snippet include）：

液体HTML：

<!-- Mailchimp Form Integration -->
{% if settings.newsletter_form_action != blank %}
  {% assign form_action = settings.newsletter_form_action %}
{% else %}
  {% assign form_action = '#' %}
{% endif %}
<form action="{{ form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" class="input-group">
  <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="EMAIL" id="mail" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
  <span class="input-group-btn">
    <input type="submit" class="btn" name="subscribe" id="subscribe" value="{{ 'general.newsletter_form.submit' | t }}">
  </span>
</form>

Answer 1

    $('#pro_image').click(function(){
        $("#pro_image").fancybox({
            closeSpeed   : 250,
            closeEasing  : 'swing',
            closeOpacity : true,
            closeMethod  : 'zoomOut',
    });
  })

;

试试这个吧。

Answer 2

通常他们把js放在标题里面，也可以把它放在标签里面，但是他们说更好放在代码的底部（里面）让所有的代码通过浏览器接收并且js执行。