详情 评论 问答 子比主题 – 精美弹窗样式美化小柚子11月7日发布关注私信0429 给大家写了一款不用子比主题的弹窗的一款弹窗,比较精美好看,腾飞把一些没有用的都去掉了,这个弹窗就单独用的JS来写的,没有用多余的,CSS代码也放到JS里面了,很实用,喜欢的自行部署吧! 代码部署 定位:子比主题–>>自定义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.所有游戏资源均可联网,快来感受自己做GM的乐趣吧!。</p> <p>2.准确信息真实交易,安全快捷又方便,让虚拟交易面对面。</p> <p>3.天上不会掉馅饼,话术骗术迷人心,切勿脱离平台线下交易,被骗与平台无关!</p> <p>官方Q群:<span><a href="https://qm.qq.com/q/yneo0ZDxIW" target="_blank" style="color:#0000ff;">23593339</a></span> 站长QQ:<a href="https://wpa.qq.com/msgrd?v=3&uin=4737841&site=ThemeBox&menu=yes" target="_blank" style="color:#00e079;">4737841</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(); } })(); 文章很赞,支持一下吧~ 还没有人为TA充电 为TA充电 还没有人为TA充电 © 版权声明 版权声明 1 本站名称: 七九网单 2 本站网址:www.fengxue.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。 6 本站附件资源、教程等内容如因时效原因失效或不可用,请评论区留言或联系站长及时更新。 THE END子比美化 喜欢就支持一下吧点赞9打赏 分享QQ空间微博QQ好友复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。 上一篇 子比主题 – 数据统计条代码 下一篇 子比主题-修改免费/付费资源背景底色 评论 抢沙发 请登录后发表评论 登录 注册 暂无评论内容