通过为模态框容器添加 style="display:none" 内联样式，可确保其默认隐藏，仅在用户触发（如点击图片）时由 JavaScript 显式显示。

通过为模态框容器添加 `style="display:none"` 内联样式，可确保其默认隐藏，仅在用户触发（如点击图片）时由 javascript 显式显示。

在构建网页模态框（Modal）时，一个常见误区是：虽然逻辑上只希望模态框在用户交互（例如点击某张图片）时出现，但页面一加载就自动弹出。这通常并非 JavaScript 逻辑错误，而是 HTML 元素的初始状态未被正确设置所致。

默认情况下，HTML 中的

元素是可见的（display: block），即使你未在 CSS 中显式声明。因此，即使你的 openPopup() 函数只在点击时调用，只要

在 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'，与初始状态一致，形成闭环。

? 进阶建议（可选）：
为提升可维护性，也可在

中添加简洁的初始化脚本，避免内联样式：

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.getElementById('overlay');
    if (overlay) overlay.style.display = 'none';
  });
</script>

但对初学者而言，style="display: none" 是最直观、零风险的解决方案——无需等待 DOM 加载，不依赖外部脚本顺序，即写即生效。