javascript - 单击按钮淡出弹出窗口？

Question

我关注了this tutorial实现弹出式电子邮件通讯注册以添加到我的 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(片段包括):

液态 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',
    });
  })

;

试试这个。