点击按钮时如何淡出弹出窗口？

Question

我按照这篇教程，在我的Shopify主题上添加了一个弹出式电子邮件订阅窗口，使用的是fancybox.js和cookie.js。所有东西都正常运行，但当您输入电子邮件地址并单击“注册”时，尽管会打开一个附加选项卡以完成Mailchimp注册过程，但在原始商店选项卡上，电子邮件弹出式窗口仍然保持打开状态，好像什么也没有改变。

我想知道是否有一种方法可以调整代码，使得在单击“注册”时，新选项卡像往常一样打开，但是电子邮件弹出式窗口会消失，因此当用户回到商店时，弹出式窗口已经消失了。由于我不擅长JS，所以非常感谢任何帮助！

我的当前代码：

theme.liquid -

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>

弹窗订阅表单模板 (包含代码片段):

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>

- user2498890

Answer 1

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

;

尝试这个。

- Tanmoy

---

是的，我刚刚给你提供了一个漂亮的关闭代码。 - Tanmoy

我已经编辑了代码，请看一下，它可能会对你有所帮助。 - Tanmoy

我不确定我理解了吗？ - user2498890

这些是fancy-box的默认参数。你可以在fancy-box库中查看它。 - Tanmoy

我尝试着修改代码，使得“注册”按钮可以关闭窗口，因为当前只有“X”可以关闭窗口，但是我似乎无法让它起作用。你是在建议我可以使用FancyBox参数来在单击该按钮时关闭窗口吗？ - user2498890

是的，通过这种方式，您可以在不使用自定义代码的情况下改变很多东西。 - Tanmoy

Answer 2

通常它们将js放置在头部，也可以将其放置在任何位置的标签内，但是他们说最好将其放置在代码底部（内部 ）以便让浏览器接收所有代码并执行js。

- Ahmad Ebrahimi