子比主题 – 精美弹窗样式美化|七九网单

给大家写了一款不用子比主题的弹窗的一款弹窗，比较精美好看，腾飞把一些没有用的都去掉了，这个弹窗就单独用的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.79bk.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END