javascript - 如何在 jQuery 中使用 cookie 显示弹出窗口?
问题描述
我想显示一个弹出窗口三天,一天不超过三次。我怎么能做到这一点?
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>
解决方案
这是一个开始,使用js-cookie 和JavaScript Date 对象。
基本上它:
- 获取客户时间
- 检查是否第一次访问该站点
- 如果第一次访问,它会在 3 天后设置一个最终过期日期时间 cookie
- 并将过期的 cookie 设置为 false
- 它不是第一次访问,它检查客户端时间是否大于最终过期 cookie 时间
- 如果是,它会删除所有 cookie 并将过期的 cookie 设置为 true
- 如果不是,它会根据一天中的时间检查早上、下午和晚上的饼干
- 如果这是一天中特定时间的第一次访问,它将显示一个弹出窗口
- 并根据一天中的时间更改问候语,例如:
不是很优雅或简洁,但希望能很好地展示给你做一些东西。
测试时,如果要查看所有已设置的cookies,可以使用:
Cookies.get();
要删除 cookie,您可以使用:
Cookies.remove("cookie_name_here");
上午、下午和晚上定义为:
0400 to 1200
1200 to 1700
1700 to 0400
但是您可以随意更改它们。
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
<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
#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;
}
推荐阅读
- java - 尝试运行 jar 时,io.restassured.path.xml.XmlPath 无法转换为类 io.restassured.internal.path.xml.NodeChildrenImpl
- c# - 在 C# 中从文本文件生成 MD4 哈希
- assembly - 在 VSCode 编辑器的 UI 中以汇编语言正确折叠过程
- c# - 将 Application.Run() 放在与初始线程不同的线程中是否会产生后果?
- javascript - 通过 javascript 监听器发送 id
- r - 在 R 中,数据帧中每个 ID 的不同事件的平均数量是多少?
- database - 调整 pgBouncer 配置设置的推荐公式是什么
- wordpress - AzureAD 应用程序的多域身份验证
- java - 使用kafka jdbc sink连接器将json数据导入postgres
- python - 如何将文本转换为 json 文件?