एक बटन के क्लिक पर पॉप-अप विंडो फीका?

Question

मैंने अपनी Shopify थीम में जोड़ने के लिए पॉप-अप ईमेल न्यूजलेटर साइन-अप को लागू करने के लिए this tutorial का पालन किया है जो fancybox.js & cookie.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 %} 

जे एस:

{{ '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> 

पॉपअप न्यूजलेटर-form.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', 
    }); 
    }) 

;

इसे आजमाएं।

Answer 2

आमतौर पर वे हेडर के अंदर जेएस डालते हैं, इसे टैग के अंदर कहीं भी रखना संभव है, लेकिन वे कोड के अंदर (अंदर) के अंदर स्थानांतरित करने के लिए बेहतर कहते हैं ताकि सभी कोड ब्राउज़र द्वारा प्राप्त किए जा सकें और जेएस निष्पादित हो जाएं।