Fade out finestra pop-up con un clic di un pulsante?

Question

Ho seguito this tutorial per implementare un'iscrizione a newsletter pop-up da aggiungere al tema Shopify che utilizza fancybox.js & cookie.js. Tutto funziona perfettamente, tranne quando inserisci un indirizzo email & fai clic su "Registrati" anche se viene visualizzata una scheda aggiuntiva per completare la procedura di registrazione Mailchimp, nella scheda del negozio originale, il popup di posta elettronica rimane aperto come se nulla fosse cambiato.

Mi chiedevo se ci fosse un modo per adattare il codice in modo che al clic di "Registrati" la nuova scheda si aprisse normalmente ma il pop-up della e-mail si attenua, così quando l'utente torna al negozio il pop -up è scomparso. Non sono eccezionale con JS quindi qualsiasi aiuto sarebbe davvero apprezzato!

mio codice corrente:

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 (frammento di includere) :

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

;

Prova questo.

Answer 2

Di solito inseriscono js nell'intestazione, è anche possibile inserirli in qualsiasi parte del tag interno, ma dicono meglio posizionarli nella parte inferiore del codice (all'interno) per consentire a tutto il codice di ricevere dal browser e all'esecuzione di js.