कुकीज़ का उपयोग करते हुए विशेष क्रियाओं के आधार पर एक पॉपअप नहीं दिखाने के लिए

Question

मैं "वर्तमान में एक fancybox का उपयोग कर हूँ 2 सेकंड एक पृष्ठ लोड करने के बाद एक पॉपअप में सामग्री वितरित करने के लिए। मैं कुछ है कि इस की झुंझलाहट हटा अप हर पॉपिंग को लागू करना चाहते हैं साइट पर एक बार एक पृष्ठ लोड हो गया है।

आदर्श रूप से, यदि किसी विज़िटर ने फैंसीबॉक्स पर "बंद" बटन पर क्लिक किया है, तो पॉप-अप अगले दिन तक उनके लिए नहीं दिखाई देगा। अगर विज़िटर लिंक पर क्लिक करता है कि पॉप-अप में है, तो पॉपअप एक निर्दिष्ट बाद की तारीख तक नहीं भी होता

यहाँ कोड मैं वर्तमान पॉपअप के लिए उपयोग कर रहा हूँ है:।

// fancybox arguments 
$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     padding : 0, 
     'autoDimensions': false, 
     'autoSize': false, 
     'width': '650', 
     'height': 'auto' 
    }); 


// Launch fancyBox on first element 
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000) 

मैं इस js कुकी का उपयोग किया जा सकता है ग्रहण, लेकिन मुझे यकीन है कि कैसे वाक्य रचना बंद के आधार पर काम होता है कि मैं क्या दो अलग निश्वासित से कोई लेना देना कोशिश कर रहा हूँ नहीं हूँ।

संपादित करें:

<div style="display:none"> 
    <a class="fancybox" href="#donation-info" alt=""/></a> 
    <div id="donation-info"> 
     <?php if (get_field('donation_box_text', 'option')){ 
      echo '<h2>To all our readers:</h2>'; 
      echo '<p>' . get_field('donation_box_text', 'option') . '</p>'; 
      echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>'; 
     }; ?> 

    </div> 
</div> 

मैं भी ऊपर समारोह को अद्यतन करने के कुकीज़ शामिल करने के लिए मेरी guesstimation का सबसे अच्छा से, की कोशिश की, करने के लिए:

यहाँ एचटीएमएल पॉप-अप के लिए प्रयोग किया जाता है है कोई लाभ नहीं हुआ:

$(document).ready(function() { 
     if ($.cookie('noShowDonation')) $('.fancybox').hide(); 
    else { 
     $("#donate").click(function() { 
      // fancybox arguments 
       $(".fancybox") 
        .attr('rel', 'gallery') 
        .fancybox({ 
         padding : 0, 
         'autoDimensions': false, 
         'autoSize': false, 
         'width': '650', 
         'height': 'auto' 
        }); 

      // Launch fancyBox on first element 
       setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000) 
         $.cookie('noShowDonation', true);  
        }); 
       } 
      }); 

संपादित करें # 2 - Updated कोड नीचे @Rob द्वारा सुझाए गए कोड का उपयोग करके, मैंने fancybox के साथ-साथ टाइमआउट में कॉन्फ़िगरेशन जोड़ने का प्रयास किया, हालांकि, कोई भाग्य नहीं। यहाँ जे एस फिडल है: https://jsfiddle.net/30Lxfc6r/

Answer 1

मैं FancyBox डॉक्स के आधार पर एक JSBin उदाहरण के साथ मेरा उत्तर नवीनीकृत किया है। https://jsbin.com/bajocosese/edit?html,console,output http://fancyapps.com/fancybox/#docs

$(function() { 
    // Define cookie name 
    var cookieName = 'hide_donate'; 

    // Configure fancyBox 
    $('.fancybox').fancybox({ 
     autoDimensions: false, 
     autoSize: false, 
     height: 'auto', 
     padding: 0, 
     width: 650, 
     beforeLoad: function() { 
     // Returning false will stop fancybox from opening 
     return ! $.cookie(cookieName); 
     }, 
     afterClose: function() { 
     // Set cookie to hide fancybox for 1 day 
     $.cookie(cookieName, true, { expires: 1 }); 
     } 
    }); 

    // Handle donate click event 
    $('a#donate').on('click', function (event) { 
     event.preventDefault(); 

     // Hide fancybox and set cookie to hide fancy box for 7 days 
     $.fancybox.close(); 
     $.cookie(cookieName, true, { expires: 7 }); 
    }); 

    // Launch fancyBox on first element 
    setTimeout(function() { 
     $(".fancybox").trigger('click'); 
    }, 2000); 
}); 

याद रखें, यह उदाहरण केवल एक बार, जब तक आप कुकी को हटाने, या कुकी का नाम बदलने के लिए काम करेंगे।