點擊按鈕淡出彈出窗口？

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執行。