单页多按钮调用不同Post ID失效，如何实现对应弹窗关联？

我正在设计一个包含多个弹窗选项的页面，该区块设有自定义字段pop_up_name，供设计师输入Post ID以关联按钮与对应弹窗。当前区块PHP代码如下：

<?php include( '_data.php' ); ?>
<div class="card-trio-inner <?php echo $classes ?>" <?php echo $style; ?>> 

<div><a href="#popup"><?php echo $intro ?></a></div>   <!--Pulls from page section (defines the actual CTA) -->
<div id="social-popup">  <!--Pulls popup from popup page - hidden until button clicked-->
<img id="social-popup-close" src="/wp-content/themes/huh/_static/images/close-button.svg" alt="close">
<div class="social-popup-inner">
    <h1>
        Pop Up Heading
    </h1>
    <?php 
        $popup = get_post($pop_up_name); // POPUP PAGE ID
        echo $popup->post_content;
    ?>
</div>

问题：页面中的多个按钮会调用同一个pop_up_name，导致所有按钮弹出相同内容的弹窗。需要修改代码，使每个按钮调用其对应的pop_up_name关联的弹窗。

修改方案 #

核心思路是让每个按钮和对应的弹窗使用唯一的ID标识，绑定到各自的pop_up_name（即Post ID），避免ID重复导致的冲突。

1. 修改按钮与弹窗的关联ID

   • 将按钮的href从固定的#popup改为动态生成的#social-popup-<?php echo $pop_up_name; ?>
   • 将弹窗容器的id从固定的social-popup改为social-popup-<?php echo $pop_up_name; ?>
   • 关闭按钮改用类选择器（如social-popup-close），避免ID重复，后续用JS批量绑定事件

2. 调整弹窗内容加载逻辑
   保留原有的get_post($pop_up_name)逻辑，确保每个弹窗加载对应Post的内容，还可以把固定的弹窗标题改成动态获取的Post标题，提升灵活性。

修改后的完整代码 #

<?php include( '_data.php' ); ?>
<div class="card-trio-inner <?php echo $classes ?>" <?php echo $style; ?>> 

<div><a href="#social-popup-<?php echo $pop_up_name; ?>"><?php echo $intro ?></a></div>
<!-- 动态生成唯一ID的弹窗容器 -->
<div id="social-popup-<?php echo $pop_up_name; ?>" class="social-popup">
    <!-- 改用类选择器，避免ID重复 -->
    <img class="social-popup-close" src="/wp-content/themes/huh/_static/images/close-button.svg" alt="close">
    <div class="social-popup-inner">
        <h1>
            <?php 
                // 动态获取弹窗对应的Post标题
                $popup = get_post($pop_up_name);
                echo $popup->post_title;
            ?>
        </h1>
        <?php 
            echo $popup->post_content;
        ?>
    </div>
</div>

前端交互补充（JS部分） #

如果用JavaScript控制弹窗显示/隐藏，需针对动态生成的元素绑定事件，示例如下：

// 绑定按钮点击事件
document.querySelectorAll('.card-trio-inner a[href^="#social-popup-"]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const popupId = this.getAttribute('href');
        document.querySelector(popupId).style.display = 'block';
    });
});

// 绑定关闭按钮事件
document.querySelectorAll('.social-popup-close').forEach(btn => {
    btn.addEventListener('click', function() {
        this.closest('.social-popup').style.display = 'none';
    });
});

修改后，每个按钮都会触发对应Post ID关联的弹窗，不会再出现内容重复的问题。

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