如何移除JavaScript弹窗动画并为画廊图片设置不同背景色

问题1：移除弹窗加载时的缩放动画，直接全屏显示 #

原弹窗通过scale变换和过渡动画实现缩放效果，要让弹窗直接全屏显示，修改CSS中弹窗的初始状态和激活状态样式即可：

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  overflow: hidden;
  transition: opacity 0.5s;
  opacity: 0;
  pointer-events: none; /* 隐藏时禁止交互，避免干扰页面元素 */
}

.popup.active {
  opacity: 1;
  pointer-events: auto; /* 显示时恢复交互 */
}

.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .large-image,
.popup.active .arrow-btn {
  opacity: 1;
  transition: opacity .5s;
  transition-delay: 0s; /* 取消延迟，让弹窗元素直接显示 */
}

修改说明：

• 把弹窗初始定位从居中偏移改成直接铺满全屏，移除translate和scale变换
• 过渡效果只保留opacity变化，彻底去掉缩放动画
• 添加pointer-events控制交互状态，避免弹窗隐藏时影响页面其他操作

问题2：切换图片时同步更新弹窗背景色 #

之前在gallery-image内加bk类无效，是因为背景色需要作用在弹窗容器上，而非缩略图容器。直接通过JS控制弹窗背景色即可：

修改后的JavaScript代码 #

const images = [...document.querySelectorAll('.image')];

// 获取弹窗相关元素
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const imageName = document.querySelector('.image-name');
const largeImage = document.querySelector('.large-image');
const imageIndex = document.querySelector('.index');
const leftArrow = document.querySelector('.left-arrow');
const rightArrow = document.querySelector('.right-arrow');

// 定义每张图片对应的背景色，顺序和图片一一对应，可自行修改颜色值
const bgColors = [
  '#ff7a2d',
  '#2dff88',
  '#2d7aff',
  '#ff2d91',
  '#ffd62d',
  '#882dff'
];

let index = 0;

images.forEach((item, i) => {
    item.addEventListener('click', () => {
        updateImage(i);
        popup.classList.toggle('active');
    })
})

const updateImage = (i) => {
    let path = `img/img${i+1}.png`;
    largeImage.src = path;
    imageName.innerHTML = path;
    imageIndex.innerHTML = `0${i+1}`;
    index = i;
    // 同步设置弹窗背景色
    popup.style.backgroundColor = bgColors[i];
}

closeBtn.addEventListener('click', () => {
    popup.classList.toggle('active');
})

leftArrow.addEventListener('click', () => {
    if(index > 0){
        updateImage(index - 1);
    }
})

rightArrow.addEventListener('click', () => {
    if(index < images.length - 1){
        updateImage(index + 1);
    }
})

const setPopupImage = index => {
  popup.classList.toggle('active');
}
setPopupImage(0);

修改说明：

• 新增bgColors数组存储每张图片对应的背景色，可根据需求调整颜色
• 在updateImage函数中添加popup.style.backgroundColor = bgColors[i]，每次切换图片时同步更新弹窗背景色

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