如何实现弹出层显示后关闭按钮移除.active类的功能？

核心问题分析 #

你的代码存在几个关键问题导致关闭按钮无响应：

• Trigger元素缺失data-id属性：JS里用$(this).data('id')获取ID，但HTML里的.trigger标签未添加该属性，导致postId始终为undefined，后续操作找不到对应元素。
• 重复的ID属性：循环生成的每个弹窗都使用id="overlay"和id="popup"，ID是全局唯一标识，JS选择器只会选中第一个匹配元素，后续弹窗的关闭按钮自然失效。
• 事件绑定逻辑错误：将关闭按钮的点击事件嵌套在trigger的点击事件内部，每次点击trigger都会重复绑定事件，逻辑冗余且易出问题。

分步修复代码 #

1. 补全Trigger的data-id属性

在循环生成的.trigger标签中添加data-id属性，让JS能正确获取团队成员ID：

<a class="trigger" id="<?php echo "trigger-".$teamid; ?>" data-id="<?php echo $teamid; ?>">

2. 替换重复ID为Class

将弹窗内的id="overlay"改为class="overlay"，id="popup"改为class="popup"，避免ID冲突：

<!-- 修改后的弹窗结构 -->
<div class="team-popup target" id="<?php echo "target-".$teamid; ?>">
    <div class="overlay"></div>
    <div class="popup">
        <div class="popupcontrols">
            <span class="popupclose">X</span>
        </div>
        <!-- 其余内容保持不变 -->
    </div>
</div>

3. 重构JS事件逻辑

重新编写JS代码，去掉嵌套的事件绑定，改用事件委托确保所有关闭按钮都能生效，同时完善弹窗的打开/关闭逻辑：

jQuery(function($){
    // 点击团队成员打开/关闭弹窗
    $('.trigger').on('click', function() {
        const $trigger = $(this);
        const postId = $trigger.data('id');
        const $targetPopup = $('#target-' + postId);

        if ($trigger.hasClass('active')) {
            // 已激活则关闭
            $trigger.removeClass('active');
            $targetPopup.removeClass('active');
        } else {
            // 先关闭所有已打开的弹窗
            $('.trigger.active').removeClass('active');
            $('.team-popup.active').removeClass('active');
            
            // 激活当前弹窗和trigger
            $trigger.addClass('active');
            $targetPopup.addClass('active');
        }
    });

    // 点击关闭按钮关闭对应弹窗（事件委托适配所有弹窗）
    $(document).on('click', '.popupclose', function() {
        const $popup = $(this).closest('.team-popup');
        const postId = $popup.attr('id').replace('target-', '');
        
        $popup.removeClass('active');
        $('#trigger-' + postId).removeClass('active');
    });

    // 可选：点击遮罩层关闭弹窗
    $(document).on('click', '.overlay', function() {
        $(this).closest('.team-popup').find('.popupclose').trigger('click');
    });
});

额外优化建议 #

• 给.team-popup设置默认隐藏样式（如display: none;），添加.active类时改为display: block;或通过CSS过渡实现更平滑的显示效果。
• 若需要点击弹窗内部不触发关闭，可添加阻止冒泡逻辑：

$('.popup').on('click', function(e) {
    e.stopPropagation();
});

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