jQuery:修改了带有过期 cookie 的弹出窗口,破坏了 cookie,但是在哪里?
jQuery: Modified popup with expiring cookie, breaks cookie, but where?
所以我一直在用即将过期的 cookie 编辑这个 jQuery/html/javascript 弹出窗口,这样它就不会一直弹出。问题是,它几乎完美地工作,除了我的版本不会设置 cookie,因此它不会在一天 (1) 后弹出。我试过重新排列、重新编辑代码(删除整理)以及我能想到的一切。我猜这是我添加的延迟,但我不知道它们是否会干扰。感谢任何帮助。
原文:https://www.sitepoint.com/community/t/overlay-pop-up-box-on-page-load/113885/15
$(".close").on("click", function(e) {
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", {
expires: 1
});
// Process subscription here
});
setTimeout(function() {
$("#popup,#overlay").fadeIn(500).show();
$("#popup,#overlay").delay(17000).fadeOut(500);
}, 1000);
var hasSeenSignUpDialogie = $.cookie('popup');
if (!hasSeenSignUpDialogie) {
$("<div>", {
id: "overlay"
}).insertBefore("#popup");
$("#popup").show();
}
$("#behindbar").on("click", function() {
$.removeCookie('popup');
});
#overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1000;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.donatebuttonred {
cursor: pointer;
color: #fff;
font: normal 20px 'Open Sans';
font-weight: bold;
border-radius: 0px;
background: rgba(210, 0, 0, 1);
width: 175px;
padding: 5px 5px 10px 5px !important;
height: 20px;
position: relative;
top: 0%;
margin: 47px 0px 0px 0px !important;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
box-shadow: 0px 5px 5px 0px #aaa;
text-align: center;
border: 1px solid #700;
}
#popup .close {
cursor: pointer;
color: #fff;
font: normal 20px 'Open Sans';
font-weight: bold;
float: right;
margin: 4px 5px 0px 0px;
border-radius: 5px;
background: #c00;
width: 20px;
padding: 1px 0px 8px 8px;
height: 20px;
}
#popup {
font: normal 14px 'Open Sans';
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 260px;
max-width: 500px;
min-height: 200px;
max-height: 335px;
padding: 0px 0px 0px 0px;
border: 10px solid rgba(210, 0, 0, 1);
background-color: white;
z-index: 1001;
overflow: auto;
}
#popup p {
font: normal 18px 'Open Sans';
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px 0px;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="popup">
<div class="close" href="">X</div>
<p>We're new, under funded and looking to expand with your help. <br><br>Please consider donating a small one time or reoccurring amount of your choice, it will make a difference. <br><br> We offer teir <b><u>rewards</u></b> based on the amount donated,
you can donate <b><u>via paypal or amazon</u></b>. Checkout our Donate page for more.</p>
<p class="donatebuttonred" href=""><b>Donate</b> & <b>Rewards</b></p>
</div>
我的:https://codepen.io/zachreynolds/pen/NXZKeV
注意:在CodePen中测试代码,当使用刷新编辑时,cookie不会保留在原始版本中。必须在您自己拥有的 site/page 上进行测试,或者在页面刷新时保存 cookie 的东西上进行测试。
$(".close").on("click", function(e) {
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", { expires: 1 });
// Process subscription here
});
var hasSeenSignUpDialogie = $.cookie('popup');
if(!hasSeenSignUpDialogie){
$("<div>",{ id : "overlay" }).insertBefore("#popup");
setTimeout(
function()
{
$("#overlay").fadeIn(1000).show();
$("#popup").fadeIn(1000).show();
}, 2500);}
$("#behindbar").on("click", function(){
$.removeCookie('popup');
});
所以我一直在用即将过期的 cookie 编辑这个 jQuery/html/javascript 弹出窗口,这样它就不会一直弹出。问题是,它几乎完美地工作,除了我的版本不会设置 cookie,因此它不会在一天 (1) 后弹出。我试过重新排列、重新编辑代码(删除整理)以及我能想到的一切。我猜这是我添加的延迟,但我不知道它们是否会干扰。感谢任何帮助。
原文:https://www.sitepoint.com/community/t/overlay-pop-up-box-on-page-load/113885/15
$(".close").on("click", function(e) {
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", {
expires: 1
});
// Process subscription here
});
setTimeout(function() {
$("#popup,#overlay").fadeIn(500).show();
$("#popup,#overlay").delay(17000).fadeOut(500);
}, 1000);
var hasSeenSignUpDialogie = $.cookie('popup');
if (!hasSeenSignUpDialogie) {
$("<div>", {
id: "overlay"
}).insertBefore("#popup");
$("#popup").show();
}
$("#behindbar").on("click", function() {
$.removeCookie('popup');
});
#overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1000;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.donatebuttonred {
cursor: pointer;
color: #fff;
font: normal 20px 'Open Sans';
font-weight: bold;
border-radius: 0px;
background: rgba(210, 0, 0, 1);
width: 175px;
padding: 5px 5px 10px 5px !important;
height: 20px;
position: relative;
top: 0%;
margin: 47px 0px 0px 0px !important;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
box-shadow: 0px 5px 5px 0px #aaa;
text-align: center;
border: 1px solid #700;
}
#popup .close {
cursor: pointer;
color: #fff;
font: normal 20px 'Open Sans';
font-weight: bold;
float: right;
margin: 4px 5px 0px 0px;
border-radius: 5px;
background: #c00;
width: 20px;
padding: 1px 0px 8px 8px;
height: 20px;
}
#popup {
font: normal 14px 'Open Sans';
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 260px;
max-width: 500px;
min-height: 200px;
max-height: 335px;
padding: 0px 0px 0px 0px;
border: 10px solid rgba(210, 0, 0, 1);
background-color: white;
z-index: 1001;
overflow: auto;
}
#popup p {
font: normal 18px 'Open Sans';
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px 0px;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="popup">
<div class="close" href="">X</div>
<p>We're new, under funded and looking to expand with your help. <br><br>Please consider donating a small one time or reoccurring amount of your choice, it will make a difference. <br><br> We offer teir <b><u>rewards</u></b> based on the amount donated,
you can donate <b><u>via paypal or amazon</u></b>. Checkout our Donate page for more.</p>
<p class="donatebuttonred" href=""><b>Donate</b> & <b>Rewards</b></p>
</div>
我的:https://codepen.io/zachreynolds/pen/NXZKeV
注意:在CodePen中测试代码,当使用刷新编辑时,cookie不会保留在原始版本中。必须在您自己拥有的 site/page 上进行测试,或者在页面刷新时保存 cookie 的东西上进行测试。
$(".close").on("click", function(e) {
e.preventDefault();
$("#popup, #overlay").hide();
$.cookie("popup", "displayed", { expires: 1 });
// Process subscription here
});
var hasSeenSignUpDialogie = $.cookie('popup');
if(!hasSeenSignUpDialogie){
$("<div>",{ id : "overlay" }).insertBefore("#popup");
setTimeout(
function()
{
$("#overlay").fadeIn(1000).show();
$("#popup").fadeIn(1000).show();
}, 2500);}
$("#behindbar").on("click", function(){
$.removeCookie('popup');
});