如何解决页面加载/刷新时Modal自动弹出的问题

问题根源是弹窗容器（.overlay）默认处于显示状态，页面加载时会自动展示。只需给它设置初始隐藏样式即可解决。

方法1：直接在HTML元素中添加隐藏样式 #

修改你的overlay代码，增加style="display: none;"：

<div class="overlay" id="overlay" style="display: none;">
    <div class="popup-container">
        <span class="close-btn" onclick="closePopup()">&times;</span>
        <img src="" alt="Popup Image" class="popup-image" id="popup-image">
        <div class="text-box" id="popup-text">
            
        </div>
    </div>
</div>

方法2：通过CSS全局设置（推荐） #

在样式表中添加以下规则，实现样式与结构分离：

.overlay {
    display: none;
    /* 保留你原本的其他样式，比如：
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    */
}

额外检查：确认代码中没有在页面加载时自动调用openPopup()函数，若有则移除该调用，避免弹窗被意外触发。

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