jQuery Corner Popup多实例失效求助：仅首个弹窗正常显示

我通过PHP循环获取新闻条目，想在网站角落按顺序弹窗展示。目前只有第一个弹窗能正常显示，后续的都出不来。尝试给每次jQuery.fn.cornerpopup()调用设置递增的delay和timeout参数，期望按顺序弹出，但没效果。我对jQuery/JavaScript不太熟，怀疑是函数重复调用的问题，求帮忙看看。

原代码 #

<?php 
$delay = 50;
$timeout = 3000;
$i = 1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if (have_rows('home_page_pop_up')) :
    
    while(have_rows('home_page_pop_up')) : the_row(); 
        if (get_sub_field('show_home') == 'Yes') :
            $showdate = get_sub_field('until_date');
            $today = date('Ymd');
    
    if ( $today <= $showdate ):
    
    ?>
    
    <script>
        
        jQuery.fn.cornerpopup({
        variant: 9,
        //displayOnce: true,
        slide: true,
        timeOut: <?php echo $timeout; ?>,
        delay: <?php echo $delay; ?>,
        link2: "<?php echo site_url(); ?>/news-community/",
        header: "Recent News",
        text2: "<h5><?php the_title(); ?></h5><p><?php the_excerpt(); ?> ... <a href='<?php the_permalink(); ?>'>Read more</a></p>",
        button3: "View all News",
        stickToBottom: true,
        });

    </script>
        <?php endif;
    endif;
    $i++;
$delay = $delay + 3000;
$timeout = $timeout + 3000;
    endwhile;
    endif;
    endwhile;
?>

核心问题 #

直接多次调用jQuery.fn.cornerpopup()会覆盖之前的实例——这类弹窗插件大多是单实例设计，每次调用都会重置并创建新弹窗，而非添加到展示队列，导致后续配置直接覆盖第一个，自然只显示第一个。

修复步骤 #

1. PHP端先收集所有弹窗数据：把符合条件的新闻弹窗配置整理成数组，转成JSON传给前端
2. JS端用队列控制顺序：通过setTimeout按延迟时间依次触发弹窗，或监听前一个弹窗关闭事件再启动下一个

修改后的代码 #

PHP部分（收集弹窗数据）

<?php 
$popupItems = [];
$delay = 50;
$timeout = 3000;
$i = 1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if (have_rows('home_page_pop_up')) :
    
    while(have_rows('home_page_pop_up')) : the_row(); 
        if (get_sub_field('show_home') == 'Yes') :
            $showdate = get_sub_field('until_date');
            $today = date('Ymd');
    
    if ( $today <= $showdate ):
        // 将当前新闻的弹窗配置存入数组
        $popupItems[] = [
            'variant' => 9,
            'slide' => true,
            'timeOut' => $timeout,
            'delay' => $delay,
            'link2' => site_url() . '/news-community/',
            'header' => 'Recent News',
            'text2' => "<h5>" . get_the_title() . "</h5><p>" . get_the_excerpt() . " ... <a href='" . get_the_permalink() . "'>Read more</a></p>",
            'button3' => 'View all News',
            'stickToBottom' => true
        ];
    ?>
    
    <?php endif;
    endif;
    $i++;
$delay = $delay + 3000;
$timeout = $timeout + 3000;
    endwhile;
    endif;
    endwhile;
?>

<!-- 把弹窗数据传给JavaScript -->
<script>
const popupQueue = <?php echo json_encode($popupItems); ?>;
let currentIndex = 0;

function showNextPopup() {
    if (currentIndex >= popupQueue.length) return;
    
    const popupConfig = popupQueue[currentIndex];
    // 调用弹窗插件
    jQuery.fn.cornerpopup(popupConfig);
    
    // 计算下一个弹窗的触发时间：当前弹窗的延迟 + 显示时长
    const nextTriggerDelay = popupConfig.delay + popupConfig.timeOut;
    setTimeout(showNextPopup, nextTriggerDelay);
    
    currentIndex++;
}

// 页面加载完成后启动弹窗队列
$(document).ready(function() {
    showNextPopup();
});
</script>

额外提示 #

• 如果你的cornerpopup插件支持销毁实例，建议在showNextPopup开头先销毁上一个弹窗（比如调用jQuery.fn.cornerpopup('destroy')，具体看插件文档），避免实例冲突
• 若想实现“前一个弹窗关闭后再显示下一个”，可以监听插件的关闭事件（比如onClose回调），在回调里调用showNextPopup()，比固定时间更准确

内容的提问来源于stack exchange，提问作者Rachel Glover