<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页弹出提示框代码</title> </head> <body> <h2>网页弹出提示框代码</h2> <p>alert()是网页浏览器内置的最简单提示框。它阻塞JavaScript执行，弹出直到用户点击“确定”。提示这玩意儿从1995年Netscape时代就存在了，框代至今没变过。网页</p> <p>写起来就一行：</p> <pre><code>alert('你好，弹出世界');</code></pre> <p>把这段代码丢进script标签里，提示页面加载时就会弹窗。框代用户必须点掉它才能继续操作。网页这种强制性的弹出交互在表单校验、删除确认、提示错误提示场景下挺好用，框代但千万别滥用——连续弹三个alert，网页用户大概率直接关掉标签页。弹出</p> <p>confirm()比alert多一个选择按钮。提示它返回布尔值，true代表用户点了“确定”，false代表“取消”。典型的用法是删除前的二次确认：</p> <pre><code>if(confirm('确定要删除这条记录吗？')) {  // 执行删除逻辑 } else {  // 用户反悔了 }</code></pre> <p>我自己写后台管理系统时经常用它。但有个细节挺坑——不同浏览器对按钮的默认文案不一样。Chrome显示“确定/取消”，Firefox可能是“OK/Cancel”。如果你需要完全统一的文案，就得自己写模态框。</p> <p>prompt()能接收用户输入。它会弹出一个带输入框的对话框，返回用户输入的字符串，点击“取消”则返回null。</p> <pre><code>let name = prompt('请输入你的名字', '默认值'); if(name !== null) {  console.log('你好，' + name); }</code></pre> <p>这个API在移动端体验很差，虚拟键盘会遮挡输入框，而且样式完全不可控。我做移动端页面时几乎不用它，宁可自己画一个弹出层。</p> <p>三种原生弹窗的共同缺点是：没有样式定制能力，字体、颜色、按钮形状全是浏览器说了算。而且它们会阻塞页面渲染，用户体验生硬。如果你是做面向普通用户的产品，建议用自定义模态框替代。</p> <p>但原生弹窗有个隐藏优势——它们不依赖CSS和DOM结构，即使页面的样式表加载失败或JavaScript框架崩溃，弹窗依然能正常工作。这在调试老旧系统时简直救命。</p> <p>最后说个冷知识：alert()在iframe里会以iframe为上下文弹出，如果你嵌入了第三方页面，它弹出来的框只在那个iframe区域内生效。但confirm()和prompt()在某些浏览器中会跳出iframe层级，直接作用在最顶层窗口——这会导致父页面无法感知子页面的弹窗事件，调试跨域页面时容易让人抓狂。</p> <p>写代码这么多年，我的建议是：内部工具用原生弹窗，开发效率高；用户端产品自己写模态框，可控性强。别纠结，用对场景比追求技术炫酷重要得多。</p> </body> </html>