HTML弹窗无法显示求助：页面未呈现指定元素/组

核心问题：类名拼写错误 #

你的HTML里弹窗容器的类名是ssc-popup-group和ssc-popup-main，但CSS里写成了scc-popup-group和scc-popup-main——s和c的顺序写反了，导致样式完全没应用到对应的元素上，这是弹窗不显示的主要原因。

修正后的CSS代码 #

/* 修正类名拼写 */
.ssc-popup-group{
    background-color: white;
    border-radius: 20px;
    /* 可选：加边框方便调试 */
    border: 1px solid #ccc;
}

.ssc-popup-main{
    background-color: rgb(100, 107, 112);
    background-image: url(/images/culture_module_bg.jpeg);
    background-blend-mode: multiply;
    margin: 10px;
    border-radius: 15px;
    /* 增加内边距，让内容撑开容器高度 */
    padding: 20px;
}

.ssc-popup-text-group{
    text-align: center;
    font-family: Nunito, Arial;
    color: white;
}

.popup-text-title{
    font-weight: bold;
    font-size: 20px;
}

/* 可选：优化排版间距 */
.popup-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

.popup-text {
    margin: 8px 0;
}

其他注意事项 #

• 检查背景图路径/images/culture_module_bg.jpeg是否正确，若图片不存在，背景会显示设置的rgb(100, 107, 112)颜色，不影响弹窗显示，但建议确认路径无误。
• 原CSS未给容器设置内边距，即使类名正确，内容也可能紧贴容器边缘导致视觉上不明显，添加padding可确保内容正常展示。

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