弹窗公告代码2025
<!--
<script>
document.addEventListener('DOMContentLoaded', () => {
// ===== 弹窗容器 =====
const alertContainer = document.createElement('div');
alertContainer.id = 'alert-system';
alertContainer.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
background: rgba(0,0,0,0.7);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s;
backdrop-filter: blur(5px); /* 毛玻璃效果 */
`;
document.body.appendChild(alertContainer);
// ===== 弹窗卡片 =====
const alertCard = document.createElement('div');
alertCard.className = 'alert-card';
alertCard.style.cssText = `
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 90%;
max-width: 500px;
overflow: hidden;
transform: scale(0.95) translateY(20px);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
opacity: 0;
border: 1px solid rgba(255,255,255,0.2);
`;
alertContainer.appendChild(alertCard);
// ===== 标题区域 =====
const alertHeader = document.createElement('div');
alertHeader.style.cssText = `
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
padding: 25px 20px;
text-align: center;
position: relative;
`;
alertCard.appendChild(alertHeader);
const alertTitle = document.createElement('h2');
alertTitle.id = 'alert-title';
alertTitle.style.cssText = `
font-size: 1.8rem;
font-weight: 700;
margin: 0;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
letter-spacing: 0.5px;
`;
alertHeader.appendChild(alertTitle);
const alertIcon = document.createElement('div');
alertIcon.className = 'alert-icon';
alertIcon.style.cssText = `
width: 60px;
height: 60px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(5px);
font-size: 32px;
`;
alertHeader.insertBefore(alertIcon, alertTitle);
// ===== 内容区域 =====
const alertContent = document.createElement('div');
alertContent.id = 'alert-content';
alertContent.style.cssText = `
padding: 30px;
max-height: 65vh;
overflow-y: auto;
color: #4a5568;
line-height: 1.7;
`;
alertCard.appendChild(alertContent);
// ===== 按钮区域 =====
const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = `
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
padding: 0 30px 30px;
`;
alertCard.appendChild(buttonContainer);
const primaryButton = document.createElement('button');
primaryButton.id = 'main-action';
primaryButton.style.cssText = `
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
font-size: 1rem;
min-width: 180px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
color: white;
box-shadow: 0 4px 6px rgba(255, 107, 107, 0.3);
`;
buttonContainer.appendChild(primaryButton);
const secondaryButton = document.createElement('button');
secondaryButton.id = 'secondary-action';
secondaryButton.style.cssText = `
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: 1px solid #e2e8f0;
font-size: 1rem;
min-width: 180px;
background: white;
color: #4a5568;
box-shadow: 0 4px 6px rgba(160, 174, 192, 0.1);
`;
buttonContainer.appendChild(secondaryButton);
// ===== 动态样式注入 =====
const style = document.createElement('style');
style.textContent = `
/* 弹窗动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* 内容样式 */
.alert-card-content {
margin-bottom: 25px;
text-align: center;
}
.highlight-box {
background: linear-gradient(120deg, #fffbeb, #fef3c7);
border-left: 4px solid #f59e0b;
padding: 16px;
border-radius: 8px;
margin: 20px 0;
}
.alert-list {
text-align: left;
padding-left: 20px;
}
.alert-list li {
margin-bottom: 12px;
position: relative;
}
.alert-list li:before {
content: "•";
color: #3b82f6;
font-size: 24px;
position: absolute;
left: -18px;
top: -5px;
}
`;
document.head.appendChild(style);
// ===== 弹窗管理系统 =====
const AlertManager = {
activeAlert: null,
countdown: 10,
countdownTimer: null,
// 显示设备警告（Windows专属）
showWindowsWarning() {
alertIcon.innerHTML = '⚠️';
alertIcon.style.animation = 'pulse 1.5s infinite';
alertTitle.textContent = 'Windows 设备兼容性警告';
alertContent.innerHTML = `
<div class="alert-card-content">
<p>检测到您正在使用 <strong style="color:#3b82f6">Windows 系统</strong> 访问本站！请注意：</p>
<div class="highlight-box">
<p style="font-size:1.2rem; font-weight:700; color:#dc2626; margin:0">
🚫 本站资源为 macOS 专用
</p>
</div>
<ul class="alert-list">
<li>Windows 系统无法直接运行 .dmg/.pkg 安装包</li>
<li>部分应用需通过虚拟机或转换工具运行</li>
<li>资源解压密码仅适用于 macOS 系统</li>
</ul>
<p style="margin-top:20px;color:#666;font-size:0.9rem;">
窗口将在 <span id="countdown" style="font-weight:700;color:#ef4444">10</span> 秒后自动关闭...
</p>
</div>
`;
secondaryButton.style.display = 'inline-block';
secondaryButton.innerHTML = '<span>不再提醒</span>';
primaryButton.innerHTML = '<span>继续浏览（10秒）</span>';
this.showPopup();
this.activeAlert = 'windows';
this.startCountdown();
},
// 显示公告弹窗
showAnnouncePopup() {
alertIcon.innerHTML = '📢';
alertIcon.style.animation = 'float 3s ease-in-out infinite';
alertTitle.textContent = '万能的公告栏';
alertContent.innerHTML = `
<div style="text-align:center">
<p style="font-size:1.1rem; margin-bottom:25px">感谢访问MAC世界！请留意以下重要信息：</p>
<div style="display:grid; gap:12px; max-width:400px; margin:0 auto">
<a href="/faq/" style="
display:block;
padding:16px;
background:#f0f7ff;
border-radius:12px;
text-decoration:none;
color:#2563eb;
font-weight:500;
transition:all 0.3s;
border:1px solid #dbeafe;
">
📚 MAC世界新用户必看指南👤
</a>
<a href="/17_6.html" style="
display:block;
padding:16px;
background:#f0f7ff;
border-radius:12px;
text-decoration:none;
color:#2563eb;
font-weight:500;
transition:all 0.3s;
border:1px solid #dbeafe;
">
🔑 MAC世界解压密码说明📃
</a>
<a href="/user_vip/" style="
display:block;
padding:16px;
background:#f0f7ff;
border-radius:12px;
text-decoration:none;
color:#2563eb;
font-weight:500;
transition:all 0.3s;
border:1px solid #dbeafe;
">
💖赞助VIP全站资源任意下载 ✅
</a>
</div>
<div style="
margin:25px auto;
padding:15px;
background:#f8fafc;
border-radius:12px;
max-width:400px;
text-align:left;
border:1px solid #e2e8f0;
">
<p style="display:flex; margin:0 0 10px">
<span style="margin-right:8px">ⓘ</span>
<span>本站资源提供多个备用下载链接,如遇A链接失效可尝试B链接进行下载！</span>
</p>
<p style="display:flex; margin:0">
<span style="margin-right:8px">ⓘ</span>
<span>问题反馈后一般48小时内处理或回复，您提交工单后耐心等待即可，节假日延后！</span>
</p>
</div>
</div>
`;
secondaryButton.style.display = 'none';
primaryButton.innerHTML = '<span>我已确认</span>';
this.showPopup();
this.activeAlert = 'announce';
},
// 显示弹窗的动画
showPopup() {
alertContainer.style.opacity = '1';
alertContainer.style.visibility = 'visible';
setTimeout(() => {
alertCard.style.opacity = '1';
alertCard.style.transform = 'scale(1) translateY(0)';
}, 10);
},
// 倒计时功能
startCountdown() {
this.countdown = 10;
this.countdownTimer = setInterval(() => {
this.countdown--;
primaryButton.innerHTML = `<span>继续浏览（${this.countdown}秒）</span>`;
const countdownElement = document.getElementById('countdown');
if (countdownElement) countdownElement.textContent = this.countdown;
if (this.countdown <= 0) this.hideAlert();
}, 1000);
},
// 关闭弹窗
hideAlert() {
clearInterval(this.countdownTimer);
alertCard.style.opacity = '0';
alertCard.style.transform = 'scale(0.95) translateY(20px)';
setTimeout(() => {
alertContainer.style.opacity = '0';
alertContainer.style.visibility = 'hidden';
this.activeAlert = null;
}, 400);
},
// 设备检测
detectDevice() {
const userAgent = navigator.userAgent;
return {
isWindows: /Win|Windows|Microsoft/i.test(userAgent),
isMac: /Mac|Apple/i.test(userAgent),
isMobile: /Mobi|Android/i.test(userAgent)
};
},
// 初始化系统
init() {
const device = this.detectDevice();
const noticeClosed = localStorage.getItem('windows_notice_closed') === 'true';
// 事件绑定
primaryButton.addEventListener('click', () => {
if (this.activeAlert === 'windows') {
clearInterval(this.countdownTimer);
this.hideAlert();
} else if (this.activeAlert === 'announce') {
localStorage.setItem('lastVisitTime', Date.now().toString());
this.hideAlert();
}
});
secondaryButton.addEventListener('click', () => {
localStorage.setItem('windows_notice_closed', 'true');
this.hideAlert();
});
// 点击背景关闭
alertContainer.addEventListener('click', (e) => {
if (e.target === alertContainer) this.hideAlert();
});
// 显示逻辑（Windows设备优先）
if (device.isWindows && !device.isMobile && !noticeClosed) {
setTimeout(() => this.showWindowsWarning(), 2000);
} else {
this.checkAnnouncePopup();
}
},
// 公告弹窗检查
checkAnnouncePopup() {
const lastVisit = parseInt(localStorage.getItem('lastVisitTime') || '0');
const currentTime = Date.now();
if (currentTime - lastVisit > 60 * 60 * 1000) { //60分钟间隔
setTimeout(() => this.showAnnouncePopup(), 1500);
}
}
};
// 初始化弹窗系统
AlertManager.init();
});
</script>
-->特别声明：以上内容(如有图片或视频亦包括在内)为本平台用户上传并发布，本平台仅提供信息存储服务。举报
