当前位置：首页 > 行业动态 > 正文

html消息提醒模板

admin
行业动态
2025-04-29
2957

JS Notification API：requestPermission后，用new Notification(title,

基础结构

HTML消息提醒通常由容器层、图标层、文本层和操作按钮组成,以下是标准模板结构：

<div class="message-box">
  <div class="message-icon"></div>
  <div class="message-content">
    <p class="message-title">提示标题</p>
    <p class="message-description">这是具体的消息内容，描述当前状态或操作建议</p>
    <button class="message-close">×</button>
  </div>
</div>

样式设计规范

元素类名	功能说明	推荐样式
`.message-box`	消息容器	固定定位、自适应宽度、阴影效果、背景色（根据类型变化）
`.message-icon`	状态图标	Font Awesome图标/自定义符号、与内容区保持间距
`.message-content`	消息主体	垂直居中排列、文字换行处理
`.message-title`	标题文本	加粗字体、主色调
`.message-description`	描述文本	常规字体、辅助色
`.message-close`	关闭按钮	圆角背景、hover动效、绝对定位在右上角

动态样式配置表

消息类型	背景颜色	图标颜色	标题颜色	适用场景
成功(success)	#e8f5e9	#4caf50	#2e7d32	操作成功提示
警告(warning)	#fff8e1	#ff9800	#fb8c00	异常状态预警
错误(error)	#fdedec	#f44336	#d32f2f	操作失败提示
信息(info)	#e0f2f7	#1e88e5	#0277bd	普通信息通知

交互功能实现

自动关闭机制

html消息提醒模板第1张

setTimeout(() => {
  document.querySelector('.message-box').style.opacity = '0';
  setTimeout(() => {
    document.querySelector('.message-box').remove();
  }, 500); // 配合淡出动画时长
}, 3000); // 3秒后自动关闭

手动关闭功能

document.querySelector('.message-close').addEventListener('click', () => {
  const box = document.querySelector('.message-box');
  box.classList.add('slide-out'); // 触发CSS动画
  setTimeout(() => {
    box.remove();
  }, 300); // 配合滑动动画时长
});

多消息队列管理

const messageQueue = [];
function showMessage(type, content) {
  const box = createMessageBox(type, content);
  document.body.appendChild(box);
  messageQueue.push(box);
  if(messageQueue.length > 3) { // 最多保留3条消息
    messageQueue.shift().remove();
  }
}

响应式适配方案

@media (max-width: 768px) {
  .message-box {
    width: 90%;
    font-size: 14px;
    border-radius: 8px;
  }
  .message-icon {
    margin-right: 8px;
  }
}