如何通过JavaScript实现点击按钮时在页面中央置顶显示大文本数秒？

以下是一套兼容多浏览器、适配不同屏幕尺寸的实现方案：

HTML 结构 #

<button id="showToastBtn">点击显示提示</button>
<!-- 提示文本容器，初始隐藏 -->
<div id="toastMessage" class="toast"></div>

CSS 样式 #

.toast {
  /* 固定定位确保始终在视口中央 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 弹性布局实现内容居中 */
  display: none;
  justify-content: center;
  align-items: center;
  /* 层级设为最高，确保在其他元素上方 */
  z-index: 9999;
  /* 半透明背景提升可读性 */
  background-color: rgba(0, 0, 0, 0.2);
}

.toast.show {
  display: flex;
}

.toast-text {
  /* 使用vw单位适配不同屏幕宽度 */
  font-size: 8vw;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  /* 加阴影突出层级 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

JavaScript 逻辑 #

const showToastBtn = document.getElementById('showToastBtn');
const toastMessage = document.getElementById('toastMessage');

// 定义显示提示的函数
function showToast(text, duration = 3000) {
  // 清空容器并添加文本元素
  toastMessage.innerHTML = `<div class="toast-text">${text}</div>`;
  // 显示提示
  toastMessage.classList.add('show');
  
  // 定时隐藏提示
  setTimeout(() => {
    toastMessage.classList.remove('show');
    toastMessage.innerHTML = '';
  }, duration);
}

// 绑定按钮点击事件
showToastBtn.addEventListener('click', () => {
  showToast('这是你的提示文本！', 3000);
});

关键特性说明 #

• 兼容性：使用标准的addEventListener、CSS flex布局和固定定位，兼容Chrome、Firefox、Safari、Edge等现代浏览器，也支持IE11（IE11对vw单位和rgba的支持无问题）。
• 屏幕适配：文本大小用vw单位，会根据屏幕宽度自动缩放；容器使用100vw/100vh确保覆盖整个视口，居中逻辑不受页面滚动影响。
• 层级控制：z-index: 9999确保提示框始终在其他页面元素上方；半透明背景和阴影让提示更醒目。
• 可定制性：可以通过修改CSS调整文本样式、背景色，通过showToast函数的参数自定义提示内容和显示时长。

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