點擊按鈕淡出彈出窗口？

我已經關注this tutorial實施彈出式電子郵件時事通訊註冊，以添加到我的Shopify主題，該主題使用了fancybox.js & cookie.js。除非輸入電子郵件地址，否則一切正常。&即使打開了一個附加選項卡以完成Mailchimp註冊過程，在原始商店選項卡上，點擊'註冊'，電子郵件彈出窗口保持打開狀態，就像沒有任何更改。點擊按鈕淡出彈出窗口？

我想知道是否有一種方法可以調整代碼，以便點擊'註冊'時，新標籤會正常打開，但電子郵件彈出消失，所以當用戶返回商店時，流行消失了。我不擅長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 %}

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>

彈出快訊 - 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>

來源

2015-04-17 user2498890

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

;

試試這個。

來源

2015-04-17 09:26:11 Tanmoy

是的，我只是給你看看密碼的代碼。 – Tanmoy

對不起我的錯誤。 – Tanmoy

我已編輯代碼看看，它可能會幫助你。 – Tanmoy

通常他們把js放在標題裏面，也可以放在標籤內的任何地方，但是他們會說最好放在代碼的底部（內部），讓所有的代碼都可以通過瀏覽器和js執行。

來源

2015-04-17 09:39:03

點擊按鈕淡出彈出窗口？

回答

相關問題