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

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();

    }

})();