在互联网平台运营中，重要信息的有效传递，是保障用户体验、规避使用风险的关键环节。优源库深耕子比生态，始终将用户权益放在首位，为了让每一位用户都能及时获取平台核心提示、安全警示及联系渠道，特别推出高级精美弹窗公告功能，以直观、醒目的方式，将关键信息精准触达每一位用户，既兼顾视觉体验，又凸显实用价值。
🎨 一、WP适配设计：弹窗公告的美观与实用兼顾
优源库的弹窗公告，并非简单的信息陈列，而是经过精心设计的功能性提醒工具，兼顾美观与实用性，完全适配WordPress文章的视觉调性。弹窗采用3D动态特效，搭配渐变背景与流光动画，入场时的弹性过渡、装饰元素的悬浮效果，让弹窗既不突兀，又能快速吸引用户注意力，避免因信息繁杂而被忽略。
同时，弹窗全程禁止上下、左右滑动，所有内容完整呈现，确保用户无需操作就能清晰查看全部信息，极大提升了信息传递的效率，贴合WP用户对简洁、高效体验的需求，复制后可直接适配WP文章页面，无需额外调整格式。
📋 二、弹窗核心内容：聚焦用户需求，直击核心痛点
弹窗公告的核心内容，紧紧围绕用户使用安全与平台服务展开，每一条信息都贴合用户需求、直击核心痛点，排版清晰、重点突出，符合WP文章“层次分明、易读性强”的特点。
📍 2.1 平台定位清晰，服务一目了然
公告开篇明确平台定位——优源库专注于子比主题、教程、精品源码、软件基地分享，用简洁直白的语言，让新老用户快速明晰平台核心服务，无需多余铺垫，适配WP文章“开门见山”的排版逻辑。
✨ 2.2 核心优势突出，强化平台价值
公告清晰列出平台两大核心优势，排版整齐、重点明确：一是丰富的功能系统，可拓展社区特色玩法，打造优质互联网聚集圈子；二是规范的交易环境，保障信息真实、交易安全，让虚拟交易更便捷，符合WP文章“重点内容突出、层次清晰”的要求。
⚠️ 2.3 安全警示醒目，守护用户权益
尤为重要的是，弹窗公告重点强化了安全警示，针对虚拟交易中常见的风险，明确提醒每一位用户：⚠️ “天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！”
这一警示采用醒目样式，在排版中突出显示，既是平台基于过往经验，为用户规避诈骗风险的贴心提示，也彰显了优源库对用户权益的重视，引导用户树立安全交易意识，守护自身财产安全，贴合WP文章“实用为先”的核心需求。
📞 2.4 联系渠道直观，沟通高效便捷
为了方便用户在有需求时快速对接平台，弹窗公告底部清晰呈现了官方联系渠道，采用单行横排设计，禁止换行与滑动，确保信息完整可见：📌 官方Q群：123456 📌 钉推群：123456 ✉️ 站长QQ：1234567
无论是咨询问题、反馈建议，还是对接需求，用户都能快速找到对应渠道，实现与平台的高效沟通，排版简洁直观，符合WP文章“便捷性、实用性”的排版原则。
🔘 三、人性化操作：适配WP用户使用习惯
弹窗公告还设置了人性化的操作按钮，“一天内不显示”与“我知道啦”两个选项，兼顾不同用户的使用需求，操作逻辑简单，适配WP用户的使用习惯。
若用户已熟悉公告内容，可选择“一天内不显示”，避免重复弹窗干扰；若首次查看，点击“我知道啦”即可关闭弹窗，同时弹窗支持ESC键关闭、点击遮罩关闭，进一步提升了用户操作体验，与WP文章“人性化、易操作”的排版理念高度契合。
🤝 四、弹窗公告的核心意义：连接平台与用户的桥梁
看似简单的弹窗公告，背后是优源库对用户体验的极致追求，也是平台责任心的体现。它不仅是信息传递的载体，更是连接平台与用户的桥梁——既让用户快速了解平台服务、掌握安全知识，也让平台的贴心服务直达用户，拉近与用户的距离。
未来，优源库将继续优化弹窗公告功能，结合用户需求更新内容，用更精准、更贴心的提醒，守护每一位用户的使用安全，助力打造更安全、更优质的互联网交流交易生态，排版也将持续适配WordPress文章模式，方便用户直接复制使用。
搜索🔍
设置为 false（默认）：保持原有逻辑，每天只弹一次（24 小时内不再重复） 设置为 true：忽略时间限制，每次刷新网页都会弹窗
[hidecontent type="reply"]
// 在线状态切换
jQuery(document).on('click', '.user-online-status .but', function () {
var $this = jQuery(this);
var $container = $this.closest('.user-online-status');
var status = $this.data('sta');
var nonce = $container.find('#user_online_status_nonce').val() || window.user_online_status_nonce || '';
if ($this.data('processing')) return;
$this.data('processing', 1);
$container.find('.but').removeClass('active');
$this.addClass('active');
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: 'user_online_status_switch',
status: status,
nonce: nonce
},
success: function (response) {
if (response.success) {
var user_id = window.current_user_id || '';
if(user_id){
jQuery('.online-status-dot.user-uid-' + user_id)
.removeClass('online away busy offline')
.addClass(status);
}
if (typeof notyf === 'function') {
notyf(response.msg, 'success', 1000);
}
} else {
if (typeof notyf === 'function') {
notyf(response.msg || '状态更新失败', "danger");
}
}
},
error: function () {
if (typeof notyf === 'function') {
notyf('网络请求异常');
}
},
complete: function () {
$this.data('processing', 0);
}
});
});
jQuery(document).on('click', "a[href*='action=logout']", function (e) {
var nonce = jQuery('#user_online_status_nonce').val() || window.user_online_status_nonce || '';
var user_id = window.current_user_id || '';
if (user_id && nonce) {
e.preventDefault();
var logoutUrl = jQuery(this).attr('href');
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
action: 'user_online_status_switch',
status: 'offline',
nonce: nonce
},
complete: function () {
window.location.href = logoutUrl;
}
});
}
});
// 高级精美公告弹窗 - 带动态特效
(function() {
function shouldShowAnnouncement() {
const last = localStorage.getItem('announcementLastShown');
if (!last) return true;
try {
return Date.now() > new Date(last).getTime() + 24*60*60*1000;
} catch {
return true;
}
}
if (!shouldShowAnnouncement()) return;
function injectStyles() {
const style = document.createElement('style');
style.textContent = `
/* 全局遮罩 - 渐变动画 */
.anno-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 9998;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(2px);
}
.anno-modal-backdrop.show {
opacity: 1;
}
/* 弹窗容器 - 3D效果+弹性动画 */
.anno-popup {
position: fixed;
top: 50%;
left: 50%;
z-index: 9999;
transform: translate(-50%, -50%) scale(0.9) rotateX(10deg);
width: 100%;
max-width: 680px; /* 加宽弹窗 */
background: #ffffff;
border-radius: 24px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 8px 30px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.anno-popup.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotateX(0);
}
/* 头部装饰 - 渐变背景+流光效果 */
.anno-header-wrapper {
position: relative;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
}
.anno-header-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
100% {
left: 100%;
}
}
.anno-header {
padding: 30px 24px 20px;
font-size: 22px;
font-weight: 800;
color: #ffffff;
text-align: center;
position: relative;
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
letter-spacing: 1px;
}
/* 内容区域 - 卡片质感 */
.anno-body {
padding: 0 32px 28px;
font-size: 15px;
line-height: 1.8;
color: #333;
/* 移除最大高度限制，禁止滚动 */
height: auto;
overflow: hidden !important; /* 强制禁止滚动 */
background: #f9f9fb;
position: relative;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
}
.anno-body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
}
/* 文字美化样式 */
.anno-main-title {
font-size: 16px;
font-weight: 700;
color: #667eea;
margin-bottom: 16px !important;
padding-left: 0 !important;
text-align: center;
letter-spacing: 0.5px;
}
.anno-main-title::before {
display: none !important;
}
.anno-list-item {
margin: 0 0 16px !important;
position: relative;
padding-left: 24px !important;
font-weight: 500;
}
.anno-list-item::before {
content: '✦';
position: absolute;
left: 0;
color: #764ba2;
font-weight: bold;
font-size: 14px;
}
.anno-warning {
background: linear-gradient(120deg, #fff5f5 0%, #ffe3e3 100%);
border-left: 4px solid #f56565;
padding: 12px 16px !important;
border-radius: 8px;
margin: 20px 0 !important;
color: #c53030 !important;
font-weight: 600;
}
.anno-warning::before {
content: '⚠️' !important;
font-size: 16px !important;
left: 12px !important;
top: 12px !important;
}
/* 联系方式单行显示样式 */
.anno-contact {
background: #f8f9fa;
padding: 16px 20px !important;
border-radius: 10px;
margin-top: 16px !important;
border: 1px solid #e9ecef;
white-space: nowrap !important; /* 强制单行显示 */
overflow: hidden !important; /* 禁止溢出 */
text-overflow: clip !important; /* 禁止省略号 */
text-align: center !important; /* 居中对齐 */
font-size: 14px !important;
}
.anno-contact span {
display: inline-block;
margin: 0 12px !important; /* 调整间距 */
padding: 6px 12px !important;
background: #e8f4f8;
border-radius: 6px;
color: #2d3748;
font-weight: 600;
white-space: nowrap !important; /* 强制单行 */
}
.anno-contact a {
color: #667eea;
text-decoration: none;
font-weight: 600;
position: relative;
}
.anno-body a {
color: #667eea;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
.anno-body a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: #667eea;
transition: width 0.3s ease;
}
.anno-body a:hover::after {
width: 100%;
}
/* 按钮组 - 现代化设计+微动效 */
.anno-footer {
display: flex;
gap: 16px;
padding: 20px 32px 28px;
justify-content: center;
background: #ffffff;
}
.anno-btn {
flex: 1;
padding: 15px 20px;
border-radius: 12px;
border: none;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}
.anno-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.anno-btn:hover::before {
transform: translateX(0);
}
.anno-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.anno-btn:active {
transform: translateY(0);
}
.anno-btn-muted {
background: #f0f2f5;
color: #666;
}
.anno-btn-muted:hover {
background: #e4e7eb;
color: #333;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.anno-btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.anno-btn-primary:hover {
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* 按钮文字特效 */
.btn-text-glow {
position: relative;
z-index: 1;
}
.anno-btn-primary .btn-text-glow {
text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.anno-btn-muted .btn-text-glow:hover {
text-shadow: 0 0 6px rgba(102, 126, 234, 0.4);
}
/* 滚动条美化 - 隐藏滚动条 */
.anno-body::-webkit-scrollbar {
display: none !important;
}
body.anno-no-scroll {
overflow: hidden;
}
/* 关闭按钮装饰 */
.close-icon {
position: absolute;
top: 16px;
right: 16px;
width: 24px;
height: 24px;
cursor: pointer;
opacity: 0.8;
transition: all 0.3s ease;
z-index: 10;
}
.close-icon:hover {
opacity: 1;
transform: rotate(90deg);
}
.close-icon::before, .close-icon::after {
content: '';
position: absolute;
top: 11px;
left: 3px;
width: 18px;
height: 2px;
background: #fff;
border-radius: 1px;
}
.close-icon::before {
transform: rotate(45deg);
}
.close-icon::after {
transform: rotate(-45deg);
}
/* 装饰元素 */
.decor-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
animation: float 3s infinite ease-in-out;
}
.decor-dot:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.decor-dot:nth-child(2) {
top: 60%;
right: 15%;
animation-delay: 1s;
}
.decor-dot:nth-child(3) {
bottom: 30%;
left: 20%;
animation-delay: 2s;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
`;
document.head.appendChild(style);
}
function closePopup(remember = false) {
document.body.classList.remove('anno-no-scroll');
const popup = document.querySelector('.anno-popup');
const mask = document.querySelector('.anno-modal-backdrop');
// 退出动画
if (popup) popup.classList.add('exit');
if (mask) mask.classList.remove('show');
setTimeout(() => {
popup?.remove();
mask?.remove();
}, 400);
if (remember) {
localStorage.setItem('announcementLastShown', new Date().toISOString());
}
}
function createPopup() {
document.body.classList.add('anno-no-scroll');
// 创建遮罩
const mask = document.createElement('div');
mask.className = 'anno-modal-backdrop';
document.body.appendChild(mask);
// 创建弹窗
const popup = document.createElement('div');
popup.className = 'anno-popup';
popup.innerHTML = `
<div class="anno-header-wrapper">
<div class="close-icon" id="popupClose"></div>
<div class="decor-dot"></div>
<div class="decor-dot"></div>
<div class="decor-dot"></div>
<div class="anno-header">站内重要通告</div>
</div>
<div class="anno-body">
<p class="anno-main-title">优源库 · 专注于子比主题、教程、精品源码、软件基地分享</p>
<p class="anno-list-item">丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。</p>
<p class="anno-list-item">准确信息真实交易，安全快捷又方便，让虚拟交易面对面。</p>
<p class="anno-warning">天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！</p>
<p class="anno-contact">
官方Q群：123456 📌钉推群：123456 ✉️站长QQ：1234567
</p>
</div>
<div class="anno-footer">
<button class="anno-btn anno-btn-muted" id="todayHide"><span class="btn-text-glow">一天内不显示</span></button>
<button class="anno-btn anno-btn-primary" id="closeBtn"><span class="btn-text-glow">我知道啦</span></button>
</div>
`;
document.body.appendChild(popup);
// 入场动画延迟
setTimeout(() => {
mask.classList.add('show');
popup.classList.add('show');
}, 80);
// 绑定事件
document.getElementById('closeBtn').onclick = () => closePopup(false);
document.getElementById('todayHide').onclick = () => closePopup(true);
document.getElementById('popupClose').onclick = () => closePopup(false);
mask.onclick = () => closePopup(false);
// ESC键关闭
document.addEventListener('keydown', e => {
if (e.key === 'Escape') closePopup(false);
});
}
// 初始化
injectStyles();
createPopup();
})();
