設置一個jQuery cookie只顯示一次popup

Question

我是jQuery中的絕對新手。我在學習，但有一個聖誕節消息，我需要立即啓動並運行。

我已經在頁面的標題包括這些：

<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>` 

然後接着用一個jQuery彈出消息。那就是：

<script type="text/javascript"> 
$(document).ready(function() { 
     var id = '#dialog'; 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.7); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2-220); 

     //transition effect 
     $(id).fadeIn(2000);  

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });  

}); 

</script> 

在body我已經把消息：

<div style="top: 199.5px; left: 200px; display: none;" id="dialog" class="window"> 
XMAS MESSAGE 
<a href="#" class="close">Shut this popup.</a> 
</div> 

到目前爲止好。下一步將不會讓我的回頭客一遍又一遍地重複同樣的信息（推遲六十天就足夠了）。

所以我想用jQuery的cookie的插件設置cookie：

function setCookie() { 
    $.cookie('test_status', '1', { path: '/', expires: 60 }); 
    return false; 
} 

然後被發現下一次訪問者點擊同一頁面，直到郵件過期未顯示女王的聖誕致辭。

現在if-else語句是更高級的jQuery我還不熟悉。那麼，有人可以向我解釋嗎？

Answer 1

這手段可能會有所幫助：

 
$(document).ready(function(){ 
    if ($.cookie('test_status') != '1') { 
    //show popup here 
    $.cookie('test_status', '1', { expires: 60}); } 
    }); 

Answer 2

你可以試試這個

$(document).ready(function() { 
    if ($.cookie('test_status')) { 
     return; 
    } 

    //Rest of your code here 
}); 

Answer 3

我有同樣的問題，我發現這個解決方案：

$(document).ready(function() { 
    var cookie = document.cookie; 
    if (cookie == "") { 
     //show popup depending on url 
     var url = window.location; 
     if (url != "http://localhost/test/jquery-popup.html") {          
      setTimeout(function() { 
       $.fn.colorbox({ html: '<div style="width:301px;height:194px;"><a href="http://livebook.in/"><img src="res/homer.jpg" style="width:301px;height:194px;" alt="The linked image" /></a></div>', open: true }); 
      }, 500); 
     }else { 
      setTimeout(function() { 
       $.fn.colorbox({html:'...', open:true}); 
      }, 500); 
     } 

     //set timeout for closing the popup 
     setTimeout(function() { $.fn.colorbox.close(); }, 3000); 

     //set cookie 
     var d = new Date(); 
     d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); //expire in 30 days 
     var expires = "expires=" + d.toGMTString(); 
     document.cookie = "apparsoYES" + "=" + "YES" + "; " + expires;  
    } 
}); 

這腳本在頁面加載時創建一個彈出窗口，自動關閉它，創建一個cookie，這樣popoup只顯示一次，並可以顯示不同不同的彈出窗口取決於頁面

Answer 4

我猜你在找什麼，當一個新用戶訪問你的Webpage時，你會彈出一個彈出窗口，但是當他瀏覽其他頁面時，彈出窗口不應該出現。

它很容易通過cookies實現，檢查此代碼示例，這將幫助你

，所以我包括所使用的代碼片段（您也可以按照下面的鏈接相同）

所以，腳本部分

var expDays = 1; // number of days the cookie should last 

var page = "only-popup-once.html"; 
var windowprops = "width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes"; 

function GetCookie (name) { 
var arg = name + "="; 
var alen = arg.length; 
var clen = document.cookie.length; 
var i = 0; 
while (i < clen) { 
var j = i + alen; 
if (document.cookie.substring(i, j) == arg) 
return getCookieVal (j); 
i = document.cookie.indexOf(" ", i) + 1; 
if (i == 0) break; 
} 
return null; 
} 
function SetCookie (name, value) { 
var argv = SetCookie.arguments; 
var argc = SetCookie.arguments.length; 
var expires = (argc > 2) ? argv[2] : null; 
var path = (argc > 3) ? argv[3] : null; 
var domain = (argc > 4) ? argv[4] : null; 
var secure = (argc > 5) ? argv[5] : false; 
document.cookie = name + "=" + escape (value) + 
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
((path == null) ? "" : ("; path=" + path)) + 
((domain == null) ? "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); 
} 
function DeleteCookie (name) { 
var exp = new Date(); 
exp.setTime (exp.getTime() - 1); 
var cval = GetCookie (name); 
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); 
} 
var exp = new Date(); 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); 
function amt(){ 
var count = GetCookie('count') 
if(count == null) { 
SetCookie('count','1') 
return 1 
} 
else { 
var newcount = parseInt(count) + 1; 
DeleteCookie('count') 
SetCookie('count',newcount,exp) 
return count 
    } 
} 
function getCookieVal(offset) { 
var endstr = document.cookie.indexOf (";", offset); 
if (endstr == -1) 
endstr = document.cookie.length; 
return unescape(document.cookie.substring(offset, endstr)); 
} 

function checkCount() { 
var count = GetCookie('count'); 
if (count == null) { 
count=1; 
SetCookie('count', count, exp); 

window.open(page, "", windowprops); 

} 
else { 
count++; 
SetCookie('count', count, exp); 
    } 
} 

而且下面將DOM的身體，

<BODY OnLoad="checkCount()"> 

http://www.jsmadeeasy.com/javascripts/Cookies/Only%20Popup%20Once/index.htm

Answer 5

首先包括jquery庫。

在jquery中包含以下腳本的cookie。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 

現在把下面的代碼插入到頁腳：

$(document).ready(function() { 
     // initially popup is hidden: 
     $('#stay-in-toch.popup-outer').hide(); 
     // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie. 
     // The cookie will expire and every 2 days and the dialog will show again. 
     if ($.cookie('whenToShowDialog') == null) { 
      // Create expiring cookie, 2 days from now: 
      $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' }); 

      // Show dialog 
      $('#stay-in-toch.popup-outer').show();  
     } 
    });