如何实现点击元素触发Popup弹窗？代码问题求助

先梳理你现有代码里的核心问题，再一步步修正实现需求：

1. 修复重复ID问题 #

循环生成弹窗时，overlay、popup、popupclose这些ID被重复创建（页面中ID必须唯一），改成类名避免冲突：

<!-- 修改后的弹窗结构 -->
<div class="team-popup" id="<?php echo "target-".$teamid; ?>">
    <div class="overlay"></div>
    <div class="popup">
        <div class="popupcontrols">
            <span class="popupclose">X</span>
        </div>
        <div class="popupcontent">
            <div class="g3">
                <img src="<?php echo $teamimg['url']; ?>" />
                <a class="nexbtn" href="<?php the_field('team_linkedin'); ?>" target="_blank" rel="noopener noreferrer">Follow <?php the_title(); ?> on LinkedIn</a>
            </div>
            <div class="g7">
                <h4><?php the_title(); ?></h4>
                <p><?php the_field('team_bio'); ?></p>
            </div>
        </div>
    </div>
</div>

2. 修正JS点击绑定逻辑 #

原代码的选择器写法错误，且循环中只会绑定最后一个成员的事件，改成匹配所有trigger-开头的元素，动态关联对应弹窗：

<script type="text/javascript">
    // 绑定所有团队成员点击事件
    $("[id^='trigger-']").on("click", function() {
        const id = this.id.replace("trigger-", "");
        const $currentTrigger = $(this);
        const $targetPopup = $("#target-" + id);

        if ($currentTrigger.hasClass("active")) {
            // 已激活状态：关闭弹窗并移除active类
            $currentTrigger.removeClass("active");
            $targetPopup.removeClass("active");
        } else {
            // 未激活状态：先重置所有弹窗和触发器状态
            $("[id^='trigger-']").removeClass("active");
            $(".team-popup").removeClass("active");
            // 激活当前触发器和对应弹窗
            $currentTrigger.addClass("active");
            $targetPopup.addClass("active");
        }
    });

    // 绑定弹窗关闭按钮事件
    $(".popupclose").on("click", function() {
        const $currentPopup = $(this).closest(".team-popup");
        const triggerId = $currentPopup.attr("id").replace("target-", "trigger-");
        // 移除对应触发器和弹窗的active类
        $("#" + triggerId).removeClass("active");
        $currentPopup.removeClass("active");
    });
</script>

3. 添加CSS控制弹窗显示/隐藏 #

用CSS控制.active类对应的弹窗状态，比JS操作样式更简洁灵活：

/* 默认隐藏所有弹窗 */
.team-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
/* 激活状态显示弹窗 */
.team-popup.active {
    display: block;
}
/* 遮罩层样式 */
.team-popup .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
/* 弹窗内容容器样式 */
.team-popup .popup {
    position: relative;
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 24px;
    z-index: 1001;
    border-radius: 8px;
}

修改后，点击团队成员会显示对应弹窗，再次点击成员或弹窗关闭按钮会隐藏弹窗，且同一时间只会显示一个弹窗。

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