Fade out pop-up window on click of a button?

Question

I've followed this tutorial to implement a pop-up email newsletter sign-up to add to my Shopify theme which uses fancybox.js & cookie.js. Everything works fine except when you enter an email address & click 'Sign Up' even though an additional tab opens to complete the Mailchimp sign up process, on the original shop tab, the email pop-up stays open as though nothing has changed.

I wondered if there is a way I could adapt the code so that on click of 'Sign Up' the new tab opens as normal but the email pop-up fades out so when the user goes back to the shop the pop-up has disappeared. I'm not great with JS so any help would be really appreciated!

My current code:

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>

popup-newsletter-form.liquid (snippet include):

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

;

Try this one.