最常用的是用 alert() 实现简单提示，但更推荐用自定义弹窗或提升体验；alert阻塞交互且不可定制；自定义弹窗通过html+css+js控制显隐与样式；标签配合showmodal()为现代推荐方案，支持esc关闭、聚焦等特性，但ie不支持。

点击按钮弹窗提示，最常用的是用 alert() 实现简单提示，但更推荐用自定义弹窗提升体验和可控性。下面分两种方式说明：

用原生 alert 快速实现

适合调试或临时提示，写法最简，但样式固定、无法自定义内容和按钮：

• 给按钮添加 onclick 属性：提交
• 或在 JS 中绑定事件：document.getElementById('btn').onclick = () => alert('已保存');
• 注意：alert 会阻塞页面交互，用户必须点确定才能继续操作

用 HTML+CSS+JS 创建自定义弹窗

不打断操作流，可自由控制样式、内容和行为，是实际项目中的主流做法：

• 先写一个隐藏的弹窗结构（含遮罩层和提示框），例如：

  删除成功！

  

  Alibabacloud Sdk Client Initialization For Java

  在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

  下载

  确定
• 用 CSS 设置 .modal { display: none; }，点击按钮时用 JS 切换为 display: block
• 点击遮罩层或“确定”按钮后，再设回 display: none 关闭弹窗
• 可加 transition 或 animate.css 实现淡入/滑动等动画效果

用现代 API 简化逻辑（推荐）

借助 showModal() 和

标签，浏览器原生支持模态弹窗：

• HTML 中写：

  数据已更新

  好的
• 按钮触发：document.getElementById('myDialog').showModal();
• 支持 ESC 关闭、点击遮罩关闭（需加 click outside to close 逻辑）、自动聚焦等特性
• 兼容性注意：IE 不支持，Chrome 37+/Firefox 98+/Edge 79+ 支持良好

小贴士：避免常见问题

让弹窗更可靠、更友好：

• 多次点击按钮时，防止重复打开多个弹窗——加个标志位判断是否已显示
• 移动端要注意点击区域足够大，避免误触；弹窗内按钮要有足够间距
• 如果提示内容来自接口，建议在请求完成后再调用弹窗，别在 loading 中就弹出
• 对无障碍访问友好：弹窗打开时自动聚焦到第一个可交互元素，关闭后恢复原焦点

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南