<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年龄验证</title>
<style>
/* 弹窗样式 */
.age-popup {
display: none;
/* 默认隐藏 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* 半透明背景 */
justify-content: center;
align-items: center;
z-index: 9999;
}
.popup-content {
background: #fff;
padding: 20px;
text-align: center;
border-radius: 8px;
width: 80%;
max-width: 400px;
}
.popup-content button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
.popup-content button.enter {
background-color: #4CAF50;
color: white;
}
.popup-content button.leave {
background-color: #f44336;
color: white;
}
</style>
<script>
// 检查用户是否已经选择过
window.onload = function () {
// 检查LocalStorage中是否已有该IP的标识
if (localStorage.getItem('ageChecked')) {
// 如果已经选择过,不再显示弹窗
if (localStorage.getItem('ageVerified') === 'true') {
//
document.getElementById('age-popup').style.display = 'none';
} else {
//
window.location.href = "跳转网站链接";
}
} else {
// 显示弹窗
document.getElementById('age-popup').style.display = 'flex';
}
}
// 用户点击“提示内容”
function enterSite() {
// 将选择记录到LocalStorage
localStorage.setItem('ageChecked', 'true');
localStorage.setItem('ageVerified', 'true');
// 隐藏弹窗
document.getElementById('age-popup').style.display = 'none';
// 不进行跳转,刷新页面也不会重新弹出
}
// 用户点击“提示内容”
function leaveSite() {
// 将选择记录到LocalStorage
localStorage.setItem('ageChecked', 'true');
localStorage.setItem('ageVerified', 'false');
window.location.href = "跳转网站链接";
// 跳转到XX首页
}
</script>
</head>
<body>
<!-- 弹窗 -->
<div id="age-popup" class="age-popup">
<div class="popup-content">
<p>欢迎访问:提示内容</p>
<button class="enter" onclick="enterSite()">提示内容,进入</button>
<button class="leave" onclick="leaveSite()">提示内容,离开</button>
</div>
</div>
</body>
</html>