[英]How to show a pop-up using cookies in jQuery?
I want to show a pop up for three days, no more than three times a day.我想显示三天的弹出窗口,一天不超过 3 次。 How could I achieve that?
我怎么能做到这一点?
HTML modal pop-up
HTML 模态弹出窗口
<div id="popup1" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content homeaz_popup">
<div class="modal-body">
<div class="banner_bg">
<a class="popup-banner" href="/landing.html">
<img class="banner_img" src="https://homeaz.vn/templates/themes/images/popupgheda.gif" alt="">
</a>
</div>
</div>
</div>
</div>
Here is a start, using js-cookie and JavaScript Date object .这是一个开始,使用js-cookie和JavaScript Date 对象。
Basically it:基本上它:
Not very elegant or concise, but hopefully demonstrated well enough for you to make something.不是很优雅或简洁,但希望表现得足够好让你做出一些东西。
When testing, if you want to view all cookies that have been set, you can use:测试的时候,如果想查看所有已经设置好的cookies,可以使用:
Cookies.get();
and to remove cookies, you can use:要删除 cookie,您可以使用:
Cookies.remove("cookie_name_here");
morning, afternoon and night are defined as:上午、下午和晚上的定义为:
0400 to 1200
1200 to 1700
1700 to 0400
but you can change them as you like.但您可以随心所欲地更改它们。
javascript javascript
// get current time of client
var client_time_now = new Date();
var client_time_now_hour = client_time_now.getHours();
console.log("client_time_now: " + client_time_now);
console.log("client_time_now_hour: " + client_time_now_hour);
// see if client has already visited the site
var final_expiry_date_time = Cookies.get("final_expiry_date_time");
// if first visit
if (final_expiry_date_time === undefined) {
console.log("this is your first visit");
// set the expiry date 3 days from now
// see: https://stackoverflow.com/a/56728401
var final_expiry_date_time_value = new Date(Date.now() + (3600 * 1000 * 72));
// to test expiry works, uncomment below
// var final_expiry_date_time_value = new Date();
console.log("final_expiry_date_time_value: " + final_expiry_date_time_value);
Cookies.set("final_expiry_date_time", final_expiry_date_time_value);
var expired = "false";
Cookies.set("expired", expired);
}
// if not first visit, check if 3 days has elapsed since first visit
else {
console.log("this is not your first visit");
// is current datetime greater than expiry datetime
// see: https://stackoverflow.com/a/493018
var expired = client_time_now.getTime() > new Date(Cookies.get("final_expiry_date_time")).getTime();
// for consistency, cookies are stored as strings
expired = expired.toString();
console.log("expired: " + expired);
// if expired, remove cookies and set expired to true
if (expired === "true") {
Cookies.set("expired", "true");
Cookies.remove("morning");
Cookies.remove("afternoon");
Cookies.remove("night");
} else {
Cookies.set("expired", "false");
}
}
if (expired === "false") {
// see if visits have been completed during these times
var already_visited_morning = Cookies.get("morning");
var already_visited_afternoon = Cookies.get("afternoon");
var already_visited_night = Cookies.get("night");
// morning handling - 4am to 12pm
if (client_time_now_hour > 3 && client_time_now_hour <= 11) {
var day_segment = "morning";
if (already_visited_morning === "true") {
console.log("you've already visited this morning");
} else {
Cookies.set("morning", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good morning");
}
}
// afternoon handling - 12pm to 5pm
else if (client_time_now_hour > 11 && client_time_now_hour <= 16) {
var day_segment = "afternoon";
if (already_visited_afternoon === "true") {
console.log("you've already visited this afternoon");
} else {
Cookies.set("afternoon", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good afternoon");
}
}
// night handling - 5pm to 4am
else if (client_time_now_hour > 16 && client_time_now_hour <= 23 || client_time_now_hour >= 0 && client_time_now_hour <= 3) {
var day_segment = "night";
if (already_visited_night === "true") {
console.log("you've already visited this night");
} else {
Cookies.set("night", "true");
// show your popup
$("#modal_bg").show();
// adjust greeting text depending on time of day
$("#greeting").text("good evening");
}
}
console.log("it's " + day_segment);
console.log("all cookies: ");
console.log(JSON.stringify(Cookies.get(), null, 4));
}
// hide the modal on clicking close button
$(document).on("click", ".close_button", function() {
$("#modal_bg").hide();
});
html html
<div id="modal_bg">
<div class="modal_content">
<img src="http://lorempixel.com/400/200/abstract/">
<div id="greeting"></div>
<div class="close_button">X</div>
</div>
</div>
<p>
here is some content.
</p>
css css
#modal_bg {
display: none;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
position: absolute;
}
.modal_content {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 400px;
position: relative;
padding: 20px;
background: #fff;
}
.close_button {
background: #dcdcdc;
position: absolute;
top: 0px;
right: 0px;
padding: 10px 20px;
font-family: arial;
font-weight: bold;
}
.close_button:hover {
cursor: pointer;
}
#greeting {
background: #fff;
position: absolute;
bottom: 40px;
padding: 2px 10px;
font-family: arial;
margin-left: 10px;
right: 40px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.