通过为模态框容器添加 style="display:none" 内联样式，可确保其默认隐藏，仅在用户触发（如点击图片）时由 JavaScript 显式显示。
通过为模态框容器添加 `style="display:none"` 内联样式，可确保其默认隐藏，仅在用户触发（如点击图片）时由 javascript 显式显示。
在构建网页模态框（Modal）时，一个常见误区是：虽然逻辑上只希望模态框在用户交互（例如点击某张图片）时出现，但页面一加载就自动弹出。这通常并非 JavaScript 逻辑错误，而是 HTML 元素的初始状态未被正确设置所致。
默认情况下，HTML 中的 <div> 元素是可见的（display: block），即使你未在 CSS 中显式声明。因此，即使你的 openPopup() 函数只在点击时调用，只要 <div class="overlay"> 在 DOM 中存在且未被隐藏，它就会在页面渲染时立即显示——除非你主动将其设为不可见。
✅ 正确做法：在 HTML 中直接初始化模态框为隐藏状态
只需为 .overlay 容器添加内联样式 style="display: none"：
<div class="overlay" id="overlay" style="display: none;">
<div class="popup-container">
<span class="close-btn" onclick="closePopup()">×</span>
<img src="" alt="Popup Image" class="popup-image" id="popup-image">
<div class="text-box" id="popup-text"></div>
</div>
</div>⚠️ 注意事项：
- 不要依赖 CSS 文件中 .overlay { display: none; } 的方式（除非你100%确认该样式已加载且无优先级冲突），因为 CSS 加载延迟或样式覆盖可能导致闪屏（FOUT）；
- 内联 style="display: none" 是最可靠、最即时的初始隐藏方案；
- 后续 JS 中 openPopup() 调用时，需将 display 改为 'flex'（或 'block'，取决于布局需求），确保与 CSS 设计一致；
- closePopup() 函数保持不变，它只是将 display 重置为 'none'，与初始状态一致，形成闭环。
? 进阶建议（可选）：
为提升可维护性，也可在 <head> 中添加简洁的初始化脚本，避免内联样式：
<script>
document.addEventListener('DOMContentLoaded', () => {
const overlay = document.getElementById('overlay');
if (overlay) overlay.style.display = 'none';
});
</script>但对初学者而言，style="display: none" 是最直观、零风险的解决方案——无需等待 DOM 加载，不依赖外部脚本顺序，即写即生效。
