当前位置：首页 > JavaScript

js实现弹窗几秒后消失

2026-01-31 08:22:41JavaScript

使用 setTimeout 实现弹窗自动消失

通过 setTimeout 函数设置延迟时间，控制弹窗显示和隐藏。

function showPopup(message, duration) {
  const popup = document.createElement('div');
  popup.textContent = message;
  popup.style.position = 'fixed';
  popup.style.top = '20px';
  popup.style.left = '50%';
  popup.style.transform = 'translateX(-50%)';
  popup.style.padding = '10px 20px';
  popup.style.background = '#333';
  popup.style.color = '#fff';
  popup.style.borderRadius = '5px';
  popup.style.zIndex = '1000';

  document.body.appendChild(popup);

  setTimeout(() => {
    popup.remove();
  }, duration);
}

// 调用示例：显示弹窗并在3秒后消失
showPopup('操作成功', 3000);

使用 CSS 动画实现渐变消失效果

结合 CSS 动画实现更平滑的消失效果。

js实现弹窗几秒后消失

function showPopupWithAnimation(message, duration) {
  const popup = document.createElement('div');
  popup.textContent = message;
  popup.style.position = 'fixed';
  popup.style.top = '20px';
  popup.style.left = '50%';
  popup.style.transform = 'translateX(-50%)';
  popup.style.padding = '10px 20px';
  popup.style.background = '#333';
  popup.style.color = '#fff';
  popup.style.borderRadius = '5px';
  popup.style.zIndex = '1000';
  popup.style.opacity = '1';
  popup.style.transition = 'opacity 0.5s ease';

  document.body.appendChild(popup);

  setTimeout(() => {
    popup.style.opacity = '0';
    setTimeout(() => popup.remove(), 500);
  }, duration);
}

使用 Promise 和 async/await 实现

利用现代 JavaScript 的异步特性实现更可控的弹窗管理。

async function showPopupAsync(message, duration) {
  const popup = document.createElement('div');
  popup.textContent = message;
  // 样式设置同上例
  document.body.appendChild(popup);

  await new Promise(resolve => setTimeout(resolve, duration));
  popup.remove();
}

// 调用示例
showPopupAsync('加载完成', 2000);

使用 class 封装弹窗功能

创建一个可复用的弹窗类，便于管理和扩展功能。

js实现弹窗几秒后消失

class AutoClosePopup {
  constructor(message, duration) {
    this.message = message;
    this.duration = duration;
    this.element = this.createPopup();
  }

  createPopup() {
    const popup = document.createElement('div');
    popup.textContent = this.message;
    // 样式设置
    document.body.appendChild(popup);
    return popup;
  }

  show() {
    setTimeout(() => {
      this.element.remove();
    }, this.duration);
  }
}

// 使用示例
const popup = new AutoClosePopup('保存成功', 1500);
popup.show();