Turn off popup at the touch of a button?

Question

I followed this tutorial to implement an email newsletter subscription to add to my Shopify theme, which uses fancybox.js and cookie.js. Everything works fine, except when you enter an email address and click "Register", even if an additional tab is open to complete the Mailchimp registration process, the pop-up email message remains open on the original store tab, as if nothing had changed.

I wondered if there was a way I could adapt the code so that when I click “Register” a new tab opens as usual, but the pop-up email disappears, so when the user returns to the store, it disappears. I am not very good at JS, so any help would be greatly appreciated!

My current code is:

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 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 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 (including snippet):

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 it.

Answer 2

Usually they put js inside the header, you can also put it somewhere inside the tag, but they say it’s better to place it at the bottom of the code (inside) so that all the code gets the browser and js execute.