点击按钮时Popup内容无法显示，请求排查代码问题

问题说明 #

点击按钮时弹窗内容无法显示，预期逻辑是：HTML按钮触发JS代码为目标弹窗元素添加active类，CSS通过该类切换弹窗的可见状态。

错误分析与修复方案 #

• CSS选择器错误：原代码中.chicken.active .chicken是错误选择器，我们需要直接选中添加了active类的.chicken元素本身，而非其子元素，应改为.chicken.active。
• Sass嵌套语法不完整：原代码嵌套结构未正确闭合，导致CSS规则无法被正确解析，需补充闭合括号。
• 弹窗定位缺失：弹窗元素需设置position: fixed（或absolute），配合top: 50%; left: 50%才能让transform: translate(-50%, -50%)实现居中效果，否则平移基准错误。
• 未定义变量问题：原代码中$b是未定义的Sass变量，需替换为具体颜色值或提前定义该变量。

修正后的完整代码 #

HTML

<button onclick="togglePopup()">
click me!
</button>

<div class="chicken" id="popup_chicken">
  <div class="chicken_content">
    content here
    <button class="chicken_buttons_close" onclick="togglePopup()">Close</button>
  </div>
</div>

JavaScript

function togglePopup() {
  document.getElementById("popup_chicken").classList.toggle("active");
}

Sass（CSS）

// 定义变量（替换为你需要的颜色）
$b: #ff4444;

.chicken {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100vh; // 铺满视口高度
    position: fixed; // 添加定位
    top: 50%;
    left: 50%;
    text-align: center;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
    transition: all 300ms ease-in-out; // 过渡效果放在初始状态
    
    &_content {
        display: inline-block;
        background-color: black;
        border-radius: 30px;
        box-shadow: -5px 5px 10px black;
        padding: 20px;
        width: 80%;
        margin-top: 3%;
        margin-bottom: 3%;
        
        &_buttons {
            margin: 15px 0;
            
            &_close {
                background-color: $b;
                cursor: pointer;
                border-radius: 50px;
                border-style: hidden;
                padding: 20px 30px;
                margin: 0 25px;
            }
        }
    }
    
    // 修正后的active类选择器
    &.active {
        transform: translate(-50%, -50%) scale(1);
        visibility: visible;
    }
}

额外说明 #

• 如果使用纯CSS而非Sass，需要把嵌套展开为普通CSS规则，比如.chicken_content、.chicken_content_buttons等。
• height: 100vh确保弹窗背景铺满整个视口，避免出现空白区域。

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