如何将Toast通知的ID改为Class并添加可关闭按钮？

原代码使用ID限制了只能创建一个Toast通知，现在需要改为类选择器支持多实例，同时添加关闭按钮，实现3秒自动淡出和手动关闭两种功能。以下是完整改造方案：

完整代码实现 #

CSS 样式 #

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  margin-bottom: 10px; /* 避免多个Toast重叠 */
}

.snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

.snackbar .close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

.snackbar .close-btn:hover {
  color: #ccc;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

HTML 结构 #

<button onclick="showToast('第一个Toast通知')">显示Toast 1</button>
<button onclick="showToast('第二个Toast通知')">显示Toast 2</button>
<button onclick="showToast('可手动关闭的Toast')">显示Toast 3</button>

JavaScript 逻辑 #

function showToast(message) {
  // 动态创建Toast元素
  const toast = document.createElement('div');
  toast.className = 'snackbar';
  toast.innerHTML = `
    ${message}
    <span class="close-btn">&times;</span>
  `;
  document.body.appendChild(toast);

  // 延迟添加show类触发动画
  setTimeout(() => {
    toast.classList.add('show');
  }, 10);

  // 自动关闭定时器
  const autoCloseTimer = setTimeout(() => {
    hideToast(toast);
  }, 3000);

  // 绑定手动关闭事件
  const closeBtn = toast.querySelector('.close-btn');
  closeBtn.addEventListener('click', () => {
    clearTimeout(autoCloseTimer);
    hideToast(toast);
  });
}

function hideToast(toast) {
  toast.classList.remove('show');
  // 等待淡出动画结束后移除DOM元素
  setTimeout(() => {
    document.body.removeChild(toast);
  }, 500);
}

关键修改说明 #

• CSS 调整：

  • 将原ID选择器#snackbar替换为类选择器.snackbar，解除单实例限制
  • 添加关闭按钮样式，通过绝对定位放在Toast右上角，增加 hover 效果提升交互体验
  • 增加margin-bottom避免多个Toast通知重叠

• HTML 优化：

  • 无需预先定义Toast元素，通过JS动态创建，减少冗余DOM
  • 多个触发按钮可独立调用不同内容的Toast

• JavaScript 增强：

  • 动态创建Toast实例，每个实例拥有独立的自动关闭定时器
  • 手动关闭按钮点击时清除定时器并立即触发淡出动画
  • 动画结束后自动移除DOM元素，避免页面节点冗余

可选：使用预定义Toast元素 #

如果需要使用页面中预先写好的Toast元素，可使用以下函数：

function showPredefinedToast(selector) {
  const toast = document.querySelector(selector);
  if (!toast) return;

  toast.classList.add('show');
  const autoCloseTimer = setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);

  const closeBtn = toast.querySelector('.close-btn');
  closeBtn.addEventListener('click', () => {
    clearTimeout(autoCloseTimer);
    toast.classList.remove('show');
  });
}

对应的HTML示例：

<div class="snackbar">
  预先定义的Toast内容
  <span class="close-btn">&times;</span>
</div>
<button onclick="showPredefinedToast('.snackbar')">显示预定义Toast</button>

内容的提问来源于stack exchange，提问作者Asma Binta Younus