当前位置：首页 > JavaScript

js实现弹窗几秒后消失

2026-03-01 23:33:48JavaScript

使用 setTimeout 实现弹窗自动消失

在 JavaScript 中，可以通过 setTimeout 函数实现弹窗在指定时间后自动消失的效果。以下是实现方法：

js实现弹窗几秒后消失

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 showFadePopup(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.transition = 'opacity 0.5s ease-out';

  document.body.appendChild(popup);

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

使用 Promise 和 async/await

如果需要等待弹窗消失后再执行其他操作，可以使用 Promise：

function showPopupAsync(message, duration) {
  return new Promise((resolve) => {
    const popup = document.createElement('div');
    popup.textContent = message;
    // 样式设置同上...
    document.body.appendChild(popup);

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

// 使用示例
async function demo() {
  await showPopupAsync('请稍候...', 2000);
  console.log('弹窗已消失');
}

使用第三方库实现

如果项目中使用 jQuery，可以简化实现：

function showJqueryPopup(message, duration) {
  const $popup = $('<div>').text(message).css({
    position: 'fixed',
    top: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    padding: '10px 20px',
    background: '#333',
    color: '#fff',
    borderRadius: '5px',
    zIndex: '1000'
  });

  $('body').append($popup);

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

以上方法均可实现弹窗自动消失功能，可根据项目需求选择合适的方式。纯 JavaScript 实现兼容性最好，CSS 动画版本用户体验更佳，Promise 版本更适合需要顺序执行的场景。