HTML5提供四种弹窗实现方式：一是window.alert原生阻塞式提示；二是自定义div+CSS+JS的可交互弹窗；三是结合CSS动画增强体验；四是语义化元素，支持showModal()和close()方法及backdrop定制。
如果您希望在网页中实现弹窗效果，HTML5 提供了原生的 window.alert 方法，也支持通过自定义 div 层结合 CSS 和 JavaScript 实现更灵活的交互式弹窗。以下是两种主要实现方式：
一、使用 window.alert 显示原生提示弹窗
window.alert 是浏览器内置的同步阻塞式弹窗方法，调用后会暂停脚本执行，直到用户点击“确定”按钮。它适用于简单信息提示，无需额外 HTML 结构或样式控制。
1、在 标签内或外部 JS 文件中调用 window.alert() 函数。
2、将需要显示的文本字符串作为参数传入，例如：window.alert("操作成功")。
立即学习“前端免费学习笔记（深入）”；
3、该弹窗无自定义样式能力，且在移动端可能被系统拦截或显示异常，不支持 HTML 内容、按钮定制或关闭动画。
二、使用自定义 div 层构建可交互弹窗
通过创建一个绝对定位的 div 元素并配合 CSS 隐藏/显示控制与 JavaScript 事件绑定，可实现完全可控的模态弹窗。该方式支持任意 HTML 内容、多按钮操作及过渡动画。
1、在 HTML 中添加一个初始隐藏的 div 容器，设置 id="modal" 并包含标题、内容区和按钮区域。
2、为该 div 编写 CSS 样式：设置 position: fixed、top: 0、left: 0、width: 100%、height: 100%、background: rgba(0,0,0,0.5)，内部弹窗盒子居中并设定宽高与背景色。
3、添加 display: none 或 visibility: hidden 初始状态，并通过 JavaScript 修改其 style.display = "block" 或切换 CSS 类来显示。
4、为关闭按钮（如 class="close"）绑定 click 事件，执行 document.getElementById("modal").style.display = "none"。
5、必须为遮罩层添加 tabindex="-1" 并监听 ESC 键事件，以满足基础可访问性要求。
三、使用 CSS 动画增强自定义弹窗表现力
在自定义 div 弹窗基础上引入 CSS 过渡或关键帧动画，可提升用户感知的响应反馈，避免突兀的显隐切换。
1、为弹窗容器定义 opacity 和 transform 初始值，例如 opacity: 0、transform: scale(0.9)。
2、创建名为 show-modal 的 CSS 类，设置 opacity: 1、transform: scale(1) 及 transition: all 0.3s ease。
3、JavaScript 触发弹窗时，先将元素 display 设为 block，再通过 setTimeout 延迟 10ms 后添加 show-modal 类。
4、关闭时先移除该类触发退出动画，待动画结束后再设 display: none。
5、动画时长需控制在 100–400ms 区间，超出易引发用户等待感。
四、通过 HTMLDialog 元素实现语义化原生弹窗
HTML5 新增的 元素是专为模态对话框设计的语义化标签，原生支持 showModal() 和 close() 方法，自动处理焦点捕获与 backdrop 渲染。
1、在 HTML 中插入 。
2、调用 document.getElementById("myDialog").showModal() 显示弹窗，此时页面其他区域不可交互。
3、为关闭按钮绑定事件，执行 document.getElementById("myDialog").close()。
4、可通过 CSS 选择器 dialog::backdrop 自定义遮罩层样式，例如设置 background: rgba(0,0,0,0.7)。
5、注意目前 Safari 对 。
