自定义弹窗样式代码
使用方法：粘贴到自定义按钮代码HTML处
每天弹窗一次，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>新年公告</title>
<style>
#newYearModalOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none; /* 默认隐藏 */
justify-content: center;
align-items: center;
z-index: 9999;
}
#newYearModal {
background: linear-gradient(to bottom, #ff4141, #c20000);
color: #fff;
border-radius: 16px;
padding: 30px 40px;
max-width: 90%;
width: 500px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
text-align: center;
position: relative;
animation: popIn 0.5s ease-out;
border: 4px solid #ffd700;
}
@keyframes popIn {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
#newYearModal h2 {
font-size: 28px;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
#newYearModal p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: #ffd700;
color: #c20000;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-weight: bold;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
#newYearModal { padding: 20px; width: 90%; }
#newYearModal h2 { font-size: 24px; }
#newYearModal p { font-size: 16px; }
}
</style>
</head>
<body>
<!-- 弹窗结构（默认隐藏） -->
<div id="newYearModalOverlay">
<div id="newYearModal">
<button class="close-btn" onclick="closeNewYearModal()">×</button>
<h2>🎉 新年快乐！</h2>
<p>感谢您一直以来的支持！<br>祝您在2026年幸福安康、万事如意！</p>
</div>
</div>
<script>
function closeNewYearModal() {
const overlay = document.getElementById('newYearModalOverlay');
overlay.style.display = 'none';
// 记录今天已显示过（以“年-月-日”为 key）
const today = new Date().toISOString().split('T')[0]; // 格式：2026-01-02
localStorage.setItem('newYearModalShownDate', today);
}
// 判断是否在活动时间范围内
function isInActivityPeriod() {
const now = new Date();
const start = new Date('2026-01-01');
const end = new Date('2026-01-15 23:59:59');
return now >= start && now <= end;
}
// 初始化弹窗逻辑
function initNewYearModal() {
if (!isInActivityPeriod()) return;
const today = new Date().toISOString().split('T')[0];
const lastShownDate = localStorage.getItem('newYearModalShownDate');
// 如果今天还没显示过，就弹出
if (lastShownDate !== today) {
document.getElementById('newYearModalOverlay').style.display = 'flex';
}
}
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', initNewYearModal);
</script>
</body>
</html>| 需求 | 修改方式 |
|---|---|
| 只在春节当天弹出 | 将isInActivityPeriod()改为判断now.toISOString().startsWith(‘2026-01-29’)（假设春节是1月29日） |
| 每周弹一次 | 把today改成year-week（如2026-W01），用getWeekNumber()函数计算周数 |
| 永久只弹一次 | 把localStorage的 key 改成固定值，比如’modalShownOnce’，设为true后不再显示 |
