点击ACCEPT按钮无法关闭TOS协议弹窗问题求助

你的代码里有两个关键错误导致按钮点击后无法关闭弹窗：

• 按钮点击事件未触发函数执行：按钮的onclick属性写的是closePopup，这只是引用函数本身，不会触发执行，需要改成closePopup()。
• 弹窗元素缺少对应ID：JS里用document.getElementById("popup")查找弹窗，但你的弹窗div只有class="popup"，没有设置id="popup"，导致无法定位到目标元素。

以下是修正后的完整代码：

JavaScript代码 #

function closePopup() {
    // Close the popup by setting its display property to "none"
    document.getElementById("popup").style.display = "none";
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hi there!</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/xp.css@0.2.3/dist/98.css" />
</head>

<body>
    <!-- 添加id="popup"用于JS定位 -->
    <div id="popup" class="popup" style="margin: 32px; width: 250px; text-align: center; border: 5px;">
        <div class="title-bar">
            <div class="title-bar-text">
                Legal agreement
            </div>
        </div>
        <div class="window-body">
            <p>you hereby consent to blah blah blah.</p>
        </div>
        <section id="button" style="justify-content: flex-end">
            <!-- 修改onclick为closePopup()触发函数 -->
            <button onclick="closePopup()">ACCEPT</button>
        </section>
    </div>
</body>
</html>

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