页面加载时下载图片弹窗闪现异常，寻求修复方案

我在网站底部创建了一个点击后显示图片的按钮，但页面加载时图片会闪现并处于展开状态，相关代码如下，求修复方案。

CSS 代码 #

/* -------- DOWNLOAD OUR APP -------- */
.byok-container {
    margin-left: 2rem;
    margin-right: 2rem;
    background-color: #22262b;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.byok-popup {
    display: none;
}
.popup-button {
    display: none;
}
.open-text {
    display: none;
}

/* Show popup */
.show-popup {
    display: grid;
}

.show-popup .byok-popup-content {
    transform: scale(1) translateY(0);
}

/* -------------- BREAKPOINTS -------------- */

@media screen and (min-width: 700px) {
    /*.mobile-text {
    display: none;
}*/
.byok-popup-content {
        position: fixed;
        right: 40px;
        bottom: 13px;
        z-index: 30000;
        margin-top: 5px;
        background-color: #CFA240;
        text-align: center;
        padding: 0.3rem;
        border-radius: 20px;
        transition: all 0.3s;
        transform: translateY(10%);
    }
.byok-open {
    background-color: #CFA240;
    position: fixed;
    bottom: 5px;
    right: 10px;
    z-index: 100;
    border-radius: 40px;
}
    
.mobile-button {
    display: none;
}
    .byok-container {
        margin-left: 1rem;
        margin-right: 1rem;
        background-color: transparent;
        height: 0;
        width: 0;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .open-text {display: inline;}
    
    .byok-popup-container {
        overflow: scroll;
        transition: all 0.3s;
        z-index: 1000;
        background-color: transparent;
        width: 100%;
        height: 0%;
        display: block;
    }
    .popup-button {
    display: inline-block;
    background-color: #CFA240;
    color: #fff;
    padding: 1rem 1.25rem;
    margin: 0.5rem;
    transition: 0.3s;
    text-align: left;
    border: none;
}
    .open-text {
    font-family: "Josefin Sans", sans-serif;
    font-size:16px;
    padding: 5px 8px;
    margin: 0;
}
    .byok-popup-close {
    display: inline-flex;
    color: #fff;
    font-size: 2rem;
    position: absolute;
    top: 0.9rem;
    right: 1.5rem;
    margin: 0;
    cursor: pointer;
    z-index: 500;
    line-height: 30px;
}

    .byok-popup-content {
        margin: auto;
        width: 300px;
        border-radius: 1.75rem;
    }
    .popup-img {
        width: 50px;
    }
    .byok-open {
        right: 40px;
    }
    .byok-close {
    font-size: 50px;
    font-weight: 200;
    color: #fff;
}
}

按钮与 JavaScript 代码 #

<button class="popup-button byok-open" id="open-popup">
    <p class="open-text">DOWNLOAD OUR APP</p>
</button>

<div class="byok-popup byok-container" id="popup-container"> <!-- Main Container -->
        <div class="byok-popup-container"> <!-- Popup Container -->
        <div class="byok-popup-content"> <!-- Popup Content -->
            <div class="byok-popup-close" title="Close" id="byok-top-close">
                <div class="byok-close">×</div>
            </div>
            <img src="/img.php" alt="app QR code, scan to go to your app store">
            </div>
    </div>
</div>

<script>
const popupContainer = document.getElementById("popup-container");
const byokButton = document.getElementById("open-popup");
const popup = document.querySelector(".byok-popup");

// Open Popup
const showPopup = () => {
  sessionStorage.setItem('BYOK Activity', 'Active');
  popupContainer.classList.add('show-popup');
  byokButton.style.display = 'none';
  popup.style.display = 'grid';
  // Add close buttons
  const closeX = document.getElementById("byok-top-close");
  closeX.addEventListener('click', closePopup);
};

byokButton.addEventListener("click", showPopup);

// Close Popup
const closePopup = () => {
  sessionStorage.setItem('BYOK Activity', 'Inactive');
  popupContainer.classList.remove('show-popup');
    if (window.innerWidth >= 700){
  byokButton.style.display = "block";
    }
  popup.style.display = "none";
}

// Check browser width | Remove popup if mobile
const byokPopupActivity = () => {
  if ((window.innerWidth >= 700) && sessionStorage.getItem('BYOK Activity') === 'Active') {
    showPopup();
    return;
  } 
  closePopup();
  sessionStorage.setItem('BYOK Activity', 'Inactive');
}

byokPopupActivity();
</script>

问题根源 #

弹窗容器同时拥有.byok-popup和.byok-container类：

• 全局样式中.byok-popup { display: none; }，但在min-width:700px的媒体查询中，.byok-container { display: flex; }
• 媒体查询的样式优先级更高，导致大屏设备加载时弹窗默认显示，JS代码执行closePopup()后才隐藏，因此出现短暂闪现

修复方案 #

方案1：调整媒体查询中的弹窗容器默认状态 #

在min-width:700px的媒体查询中，将.byok-container的默认display改为none，仅当添加show-popup类时才设置为flex：

@media screen and (min-width: 700px) {
    /* 保留其他原有样式，仅修改以下部分 */
    .byok-container {
        margin-left: 1rem;
        margin-right: 1rem;
        background-color: transparent;
        height: 0;
        width: 0;
        position: fixed;
        display: none; /* 替换原有的display:flex */
        justify-content: center;
        align-items: center;
    }
    /* 添加该规则，确保show-popup时显示容器 */
    .show-popup.byok-container {
        display: flex;
    }
}

方案2：提升.byok-popup的选择器优先级 #

使用更具体的选择器，确保.byok-popup的display:none在媒体查询中也能生效：

/* 替换全局样式中原有的.byok-popup规则 */
.byok-popup.byok-container {
    display: none;
}

方案3：优化JS执行时机 #

将JS代码包裹在DOMContentLoaded事件中，确保DOM完全加载后再执行状态检查，避免渲染时的闪现：

document.addEventListener('DOMContentLoaded', function() {
    const popupContainer = document.getElementById("popup-container");
    const byokButton = document.getElementById("open-popup");
    const popup = document.querySelector(".byok-popup");

    // Open Popup
    const showPopup = () => {
      sessionStorage.setItem('BYOK Activity', 'Active');
      popupContainer.classList.add('show-popup');
      byokButton.style.display = 'none';
      popup.style.display = 'grid';
      const closeX = document.getElementById("byok-top-close");
      closeX.addEventListener('click', closePopup);
    };

    byokButton.addEventListener("click", showPopup);

    // Close Popup
    const closePopup = () => {
      sessionStorage.setItem('BYOK Activity', 'Inactive');
      popupContainer.classList.remove('show-popup');
        if (window.innerWidth >= 700){
      byokButton.style.display = "block";
        }
      popup.style.display = "none";
    }

    // Check browser width | Remove popup if mobile
    const byokPopupActivity = () => {
      if ((window.innerWidth >= 700) && sessionStorage.getItem('BYOK Activity') === 'Active') {
        showPopup();
        return;
      } 
      closePopup();
      sessionStorage.setItem('BYOK Activity', 'Inactive');
    }

    byokPopupActivity();
});

额外优化建议 #

• 统一使用show-popup类控制弹窗的显示隐藏，避免混合使用类和直接设置style.display，减少样式冲突
• 可给弹窗内容添加visibility: hidden和opacity: 0的初始状态，配合过渡效果，让显示隐藏更平滑

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