词汇页面答对时弹窗不显示问题排查求助

问题根源 #

你在JS里给弹窗加类名的时候多写了个点！popUp.classList.add(".open-popup");里的类名带了.，但CSS里定义的类是open-popup（不带点），导致样式根本无法匹配——哪怕控制台显示添加了类，也是个错误的类名，自然不会触发弹窗显示效果。

直接修复 #

把JavaScript中的openPopUp函数改成这样：

function openPopUp() {
    popUp.classList.add("open-popup"); // 去掉类名前面的点
}

额外实用优化建议 #

• 给弹窗加关闭功能：目前弹窗弹出后无法关闭，给弹窗内的OK按钮绑定关闭事件：

// 页面加载完成后绑定关闭逻辑
document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.popup button').onclick = () => {
        popUp.classList.remove("open-popup");
    };
});

• 统一弹窗触发逻辑：现在答错时只修改文字不弹框，建议统一触发弹窗，体验更连贯：

function compare() {
    if (germanTestText.value === randomGermanWord) {
        compareText.textContent = 'Super :)';
        openPopUp();
    } else {
        compareText.textContent = 'Falsch!!!';
        openPopUp();
    }
    germanTestText.value = '';
    nextVocabulary();
}

• 避免弹窗被遮挡：给弹窗CSS添加层级属性，确保它显示在所有元素上层：

.popup {
    /* 原有样式保留 */
    z-index: 1000; /* 提升层级，防止被其他元素盖住 */
}

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