如何为jQuery登录弹窗添加延迟触发效果？

嘿，我来帮你搞定这个弹窗延迟触发的问题！我明白你不想让弹窗一加载就弹出来，而是想让它在用户停留一会儿或者滚动到页面中间再出现，对吧？下面给你两种完整可直接测试的方案，你可以根据需求选一个，甚至结合起来用~

方案一：时间延迟触发（5秒后弹出） #

这个方案很简单，就是等页面加载完成后，再等5000毫秒（5秒），如果用户还没登录，就弹出登录窗口。代码里加了注释，你直接替换原来的代码就行：

jQuery(document).ready(function($) {
    // 先判断用户是否未登录
    if (!$('body').hasClass("logged-in")) {
        // 设置5秒延迟（5000毫秒，可自行调整数值）
        setTimeout(function() {
            // 触发弹窗
            $.pgwModal({
                titleBar: false,
                target: '#rehub-login-popup',
                mainClassName : 'pgwModal re-user-popup-wrap',
            });
            // 清空弹窗里的错误提示
            $('.re-user-popup-wrap .rehub-errors').html('');
        }, 5000);
    }
});

方案二：滚动到页面50%位置时触发 #

这个方案会监听用户的滚动行为，当用户滚动到页面一半的位置时弹出弹窗，还做了防重复触发的处理，避免来回滚动时弹窗反复弹出：

jQuery(document).ready(function($) {
    // 标记弹窗是否已触发，防止重复弹出
    let popupTriggered = false;
    // 判断用户是否未登录
    if (!$('body').hasClass("logged-in")) {
        // 监听页面滚动事件
        $(window).scroll(function() {
            // 如果弹窗已经触发过，直接停止处理
            if (popupTriggered) return;
            
            // 计算页面可滚动的总高度和当前滚动的百分比
            const totalScrollableHeight = $(document).height() - $(window).height();
            const scrollPercentage = ($(window).scrollTop() / totalScrollableHeight) * 100;
            
            // 当滚动到50%及以上时触发弹窗
            if (scrollPercentage >= 50) {
                popupTriggered = true;
                // 触发弹窗
                $.pgwModal({
                    titleBar: false,
                    target: '#rehub-login-popup',
                    mainClassName : 'pgwModal re-user-popup-wrap',
                });
                // 清空弹窗错误提示
                $('.re-user-popup-wrap .rehub-errors').html('');
                // 解绑滚动事件，节省页面性能
                $(window).off('scroll');
            }
        });
    }
});

可选：两种方案结合（满足任一条件就触发） #

如果你想让用户要么停留5秒，要么滚动到页面一半，只要满足其中一个条件就弹窗，可以用这个组合版本：

jQuery(document).ready(function($) {
    let popupTriggered = false;
    if (!$('body').hasClass("logged-in")) {
        // 时间延迟触发的定时器
        const timeoutId = setTimeout(function() {
            if (!popupTriggered) {
                popupTriggered = true;
                showLoginPopup();
            }
        }, 5000);
        
        // 滚动触发逻辑
        $(window).scroll(function() {
            if (popupTriggered) return;
            
            const totalScrollableHeight = $(document).height() - $(window).height();
            const scrollPercentage = ($(window).scrollTop() / totalScrollableHeight) * 100;
            
            if (scrollPercentage >= 50) {
                popupTriggered = true;
                // 清除定时器，避免重复触发
                clearTimeout(timeoutId);
                showLoginPopup();
                $(window).off('scroll');
            }
        });
        
        // 把弹窗触发逻辑抽成独立函数，方便复用
        function showLoginPopup() {
            $.pgwModal({
                titleBar: false,
                target: '#rehub-login-popup',
                mainClassName : 'pgwModal re-user-popup-wrap',
            });
            $('.re-user-popup-wrap .rehub-errors').html('');
        }
    }
});

你只需要把上面的代码替换掉你原来的弹窗代码就行，确保页面已经引入了jQuery和pgwModal的相关文件（你原来的代码已经在使用它们，应该没问题）。测试时可以检查下#rehub-login-popup元素是否存在，以及已登录用户的body是否正确添加了logged-in类~

内容的提问来源于stack exchange，提问作者Tom Clarke