子比主题 – 精美弹窗样式美化

飞流 · 发表于 2025-10-10 18:41:17

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

腾飞博客给大家写了一款不用子比主题的弹窗的一款弹窗，比较精美好看，腾飞把一些没有用的都去掉了，这个弹窗就单独用的JS来写的，没有用多余的，CSS代码也放到JS里面了，很实用，喜欢的自行部署吧！

tengfei_down (15).webp

代码部署

定位：子比主题–>>自定义javascript代码，将代码放到里面，自己修改一下里面的内容即可！

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 lastShown = localStorage.getItem('announcementLastShown');
if (!lastShown) return true;
try {
const oneDayLater = new Date(lastShown).getTime() + (24 * 60 * 60 * 1000);
return Date.now() > oneDayLater;
} catch (e) {
console.error('解析公告显示时间失败:', e);
return true;
}
}
if (!shouldShowAnnouncement()) {
console.log('24小时内已显示过公告，暂不显示');
return;
}
function disableBodyScroll() {
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = getScrollbarWidth() + 'px';
}
function enableBodyScroll() {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
}
function getScrollbarWidth() {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.msOverflowStyle = 'scrollbar';
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
const inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
function injectStyles() {
const style = document.createElement('style');
style.textContent = `
.one-popup-windows{display:block}.modal-backdrop.fade.in{z-index:151}.one-popup-content{position:fixed;top:50%;left:50%;z-index:152;width:480px;border-radius:10px;background-color:#fff;background-image:url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01F0Ts8N1QbIqYOET57_!!2210123621994.png),url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01wbq9a41QbIqZK6cK3_!!2210123621994.png);background-position:0 0,100% 280px;background-repeat:no-repeat;-webkit-box-shadow:0 0 80px rgb(0 0 0 / 25%);box-shadow:0 0 80px rgb(0 0 0 / 25%);opacity:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.one-popup-header{margin-top:45px;color:#222;text-align:center;font-weight:700;font-size:28px}.one-popup-body{overflow-x:hidden;overflow-y:auto;margin:35px auto 40px;height:220px;padding:0 35px;scrollbar-width:none;-ms-overflow-style:none}.one-popup-body::-webkit-scrollbar{display:none}.one-popup-body p{margin-bottom:10px;color:#777;text-align:justify;font-weight:400;font-size:13px;line-height:22px;word-break:break-all}.one-popup-body p:last-child{margin-bottom:0}.one-popup-body p a{color:var(--one-popup-link_color)}.one-popup-btn-group{display:flex;justify-content:center;margin-bottom:2rem;gap:12px}.one-popup-btn{height:46px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s ease;border:none;outline:none;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,0.05)}.one-popup-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.one-popup-btn:active{transform:translateY(0);box-shadow:0 2px 3px rgba(0,0,0,0.08)}.one-popup-btn-not-show{background:linear-gradient(135deg,#5b96f7,#3a78e0);color:#ffffff;min-width:120px}.one-popup-btn-not-show:hover{background:linear-gradient(135deg,#4a85e6,#2d67d0)}.one-popup-btn-no{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#495057;min-width:100px}.one-popup-btn-no:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6);color:#343a40}.one-popup-btn-yes{background:linear-gradient(135deg,#ff7a00,#ff5e00);color:#ffffff;min-width:180px}.one-popup-btn-yes:hover{background:linear-gradient(135deg,#e66b00,#e65200)}
`;
document.head.appendChild(style);
}
function closeAnnouncement(remember = false) {
const popup = document.getElementById('one-popup-windows');
const backdrop = document.querySelector('.modal-backdrop.fade.in');
if (popup) {
popup.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
popup.style.opacity = '0';
popup.style.transform = 'translate(-50%, -55%)';
}
if (backdrop) {
backdrop.style.transition = 'opacity 0.3s ease';
backdrop.style.opacity = '0';
}
setTimeout(() => {
if (popup) popup.remove();
if (backdrop) backdrop.remove();
enableBodyScroll();
}, 300);
if (remember) {
localStorage.setItem('announcementLastShown', new Date().toISOString());
} else {
localStorage.removeItem('announcementLastShown');
}
}
function createAnnouncement() {
disableBodyScroll();
const backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop fade in';
document.body.appendChild(backdrop);
const popupContainer = document.createElement('div');
popupContainer.className = 'one-popup-windows';
popupContainer.id = 'one-popup-windows';
popupContainer.innerHTML = `
<div class="one-popup-content">
<div class="one-popup-header">站内通告</div>
<div class="one-popup-body">
<p>腾飞博客专注于子比主题、教程、精品源码、软件基地分享</p>
<p>1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。</p>
<p>2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。</p>
<p>3.天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！</p>
<p>官方Q群：<span><a href="/" target="_blank" style="color:#0000ff;">123456</a></span>钉推群：<span style="color:#dc3023;">123456</span> 站长QQ：<a href="https://wpa.qq.com/msgrd?v=3&uin=123456&site=ThemeBox&menu=yes" target="_blank" style="color:#00e079;">1234567</a></p>
</div>
<div class="one-popup-btn-group">
<button class="one-popup-btn one-popup-btn-not-show">一天内不显示</button>
<button class="one-popup-btn one-popup-btn-no">取消</button>
<button class="one-popup-btn one-popup-btn-yes">我知道啦</button>
</div>
</div>
`;
document.body.appendChild(popupContainer);
const notShowBtn = popupContainer.querySelector('.one-popup-btn-not-show');
const cancelBtn = popupContainer.querySelector('.one-popup-btn-no');
const confirmBtn = popupContainer.querySelector('.one-popup-btn-yes');
if (notShowBtn) {
notShowBtn.addEventListener('click', () => closeAnnouncement(true));
}
if (cancelBtn) {
cancelBtn.addEventListener('click', () => closeAnnouncement(false));
}
if (confirmBtn) {
confirmBtn.addEventListener('click', () => closeAnnouncement(false));
}
if (backdrop) {
backdrop.addEventListener('click', () => closeAnnouncement(false));
}
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeAnnouncement(false);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
injectStyles();
createAnnouncement();
});
} else {
injectStyles();
createAnnouncement();
}
})();

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 精美弹窗样式美化

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn