HTML5警告提示有四种实现方式：一是用alert()同步弹窗；二是自定义div层实现非阻塞式提示；三是用dialog元素创建语义化模态框；四是封装支持多类型的轻量级警告函数。
如果您需要在HTML5页面中实现警告提示功能，可以通过原生JavaScript的alert方法或自定义DOM元素构建非阻塞式警告层。以下是两种不同实现路径的具体写法：
一、使用原生alert()方法弹出警告
alert()是浏览器内置的同步模态对话框，调用后会暂停脚本执行并强制用户点击“确定”才能继续。适用于简单、低干扰的即时提示场景。
1、在<script>标签内或外部JS文件中编写alert调用语句。</script>
2、传入字符串参数作为警告内容，例如：alert("操作失败，请重试");。
立即学习“前端免费学习笔记（深入）”；
3、该语句可在事件监听器中触发，如按钮点击时：document.getElementById("btn").onclick = function(){ alert("数据已保存"); };
二、通过div层实现自定义警告弹窗
自定义div警告层可完全控制样式、动画与交互逻辑，避免阻塞主线程，支持关闭按钮、遮罩背景及多级提示类型（如成功/错误/警告）。
1、在HTML中添加一个初始隐藏的
2、为其添加CSS样式：position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 9999;。
3、在JavaScript中定义showAlert(text)函数，获取该div元素，设置innerText为传入文本，并将style.display改为"block"。
4、为提示容器内部添加关闭按钮，绑定点击事件执行：document.getElementById("customAlert").style.display = "none";
三、使用HTML5新增的dialog元素创建警告弹窗
dialog元素是HTML5原生支持的模态对话框组件，具备语义化优势和内置showModal()方法，兼容现代主流浏览器（Chrome 37+、Edge 79+、Firefox 98+）。
1、在HTML中插入
2、通过JavaScript调用其showModal()方法显示：document.getElementById("warnDialog").showModal();
3、为关闭按钮绑定事件，调用close()方法：document.getElementById("closeBtn").onclick = () => document.getElementById("warnDialog").close();
四、封装轻量级警告函数支持多种类型
通过统一入口函数接收类型（info/warn/error）与消息内容，动态生成对应样式的div层，提升复用性与维护性。
1、定义warn(message)、error(message)、info(message)三个别名函数，均调用核心函数createAlert(type, message)。
2、createAlert函数中创建div元素，设置class为"alert alert-"+type，插入body末尾。
3、应用预设CSS规则，例如.error类设置背景为#ffebee，边框为1px solid #f44336，文字颜色为#c62828。
4、自动添加3秒后淡出效果：设置opacity为1后，使用setTimeout配合transition完成隐藏：el.style.transition = "opacity 0.3s"; el.style.opacity = "0"; setTimeout(() => el.remove(), 300);
