javascript - 如果用户访问 5 个页面或用户在网站上停留 2 分钟,如何显示弹出窗口
问题描述
我想在网站上显示弹出窗口,场景就是这样。
- 如果用户访问 5 个页面显示弹出窗口
- 如果用户停留在网站上并花费 2 分钟显示弹出窗口
- 如果用户关闭弹出窗口,它将不会在下次再次出现。
它工作正常,但我不知道如何解决问题 2(如果用户留在网站上并花 2 分钟显示弹出窗口)
我尝试使用本地存储,但没有帮助。
这是代码...
var popup = '<div class="popup-cover" id="sub-popup">';
popup += '<div id="subscribe-popup" class="popup">';
popup += '<a class="close" onclick="closePopup()">×</a>';
popup += '<h1 class="sub-title">Subscribe here!</h1>';
popup += '<p class="sub-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
popup += '<a class="btn sub-btn btn-nature" onclick="hidePopup()">Subscribe</a>';
popup += '</div>';
popup += '</div>';
function closePopup() {
$('#sub-popup').remove();
localStorage.displayPopup = 0;
}
function hidePopup() {
$('#sub-popup').remove();
localStorage.displayPopup = 0;
window.open("https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267", "_blank");
}
jQuery(document).ready(function($) {
function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
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 = (2 < argc) ? argv[2] : null;
var path = (3 < argc) ? argv[3] : null;
var domain = (4 < argc) ? argv[4] : null;
var secure = (5 < argc) ? 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 displayPopup() {
var expdate = new Date();
var visit;
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
if (!(visit = GetCookie("upesy-cookie")))
visit = 0;
visit++;
SetCookie("upesy-cookie", visit, expdate, "/", null, false);
if (visit >= 4) {
if(localStorage.displayPopup != 0) {
setTimeout(function(){
$(document.body).append(popup);
SetCookie("upesy-cookie", 0);
}, 2000);
}
}
}
//window.onload = displayPopup
$(window).on("load", displayPopup);
});
解决方案
您可以在 JavaScript 中使用 setTimeout()。
setTimeout(() => {
// Open popup
}, 120000); // Amount of time to wait, in miliseconds
推荐阅读
- angular - Angular 8 PWA 资产组离线无法正常工作
- python - Django 数据库设计改进
- html - CSS - 使用变换:翻译使黑色边框变成灰色
- android - CoordinatorLayout 导致下一个片段底部切出/超出屏幕
- javascript - 如何创建函数以在 1 秒后执行另一个函数多次
- css - 如何处理在 bs4 中溢出容器的按钮?
- java - 在 HttpSession 中调用 setAttribute() 时遇到 java.lang.IllegalStateException: null
- c++ - While 循环不检查或条件
- azure-devops - 如何指定在 Mono-Repo 中为 azure-pipelines.yml 构建包的路径?
- python - 导入 seaborn 时出错(matplotlib 参数无效)