将jQuery cookie设置为仅显示一次弹出窗口
将jQuery cookie设置为仅显示一次弹出窗口
提问于 2011-12-07 03:29:34
我绝对是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>到目前一切尚好。下一步是不要一遍又一遍地重复相同的信息让我的回头客感到厌烦(推迟60天就足够了)。
因此，我想使用jQuery cookie插件设置一个cookie：
function setCookie() {
$.cookie('test_status', '1', { path: '/', expires: 60 });
return false;
}然后在下一次访问者点击同一页面时发现该消息，并且直到该消息过期才显示该圣诞节消息。
现在，if-else语句是我还不熟悉的更高级的jQuery。那么，有人能给我解释一下吗？
回答 5
Stack Overflow用户
发布于 2016-12-01 20:22:04
首先包含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();
}
});Stack Overflow用户
发布于 2011-12-07 03:38:44
你可以试试这个
$(document).ready(function() {
if ($.cookie('test_status')) {
return;
}
//Rest of your code here
});Stack Overflow用户
发布于 2014-01-03 19:01:32
我也遇到了同样的问题，我找到了这样的解决方案：
$(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，使弹出窗口只显示一次，并且可以根据页面显示不同的弹出窗口
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8405634
复制相关文章
相似问题
腾讯云开发者
