html弹窗代码大全

弹窗是弹窗代码大全网页里最招人恨又最离不开的东西。广告弹窗让人想砸电脑，弹窗代码大全但表单校验、弹窗代码大全操作确认、弹窗代码大全信息提示又离不开它。弹窗代码大全我写前端这几年，弹窗代码大全攒下几套弹窗写法，弹窗代码大全今天全抖出来。弹窗代码大全

原生 alert 系列

最粗暴的弹窗代码大全弹窗就是 alert()。一行代码搞定，弹窗代码大全浏览器自带样式，弹窗代码大全丑得稳定。弹窗代码大全它阻塞线程，弹窗代码大全点确定之前页面动不了。弹窗代码大全适合调试时临时看个值，弹窗代码大全生产环境慎用。confirm 稍微好点，能返回布尔值，但同样丑。prompt 能收用户输入，可那输入框样式……算了，别在正式项目里用它。

alert('你好'); var r = confirm('确定删除？'); var name = prompt('请输入名字');

自定义遮罩层弹窗

真正能拿出手的弹窗，得自己写。原理不复杂：一个半透明遮罩盖住全屏，上面浮一个内容框。核心是 CSS 的 position: fixed 和 z-index。我常用这段基础结构：

<div id="mask" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999;display:none"> <div style="width:400px;margin:20% auto;background:#fff;padding:20px;border-radius:8px"> <p>弹窗内容</p> <button onclick="closePop()">关闭</button> </div> </div>

显示时把 display 改成 block，隐藏时改回 none。就这么简单。但有个细节容易翻车——遮罩层的透明度。调太低，后面内容看得清，干扰视线；调太高，又像夜里停电。我习惯用 0.4 到 0.6 之间，具体看页面整体亮度。

居中弹窗的坑

上面那代码里 margin:20% auto 是偷懒写法。真要做垂直居中，flex 更好使。给遮罩层加 display:flex;align-items:center;justify-content:center，子元素就不用算 margin 了。但注意，老浏览器对 flex 支持不完美，如果你要兼容 IE10 以下，还是老老实实用 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)。这招在移动端也稳。

带关闭按钮的弹窗

用户习惯右上角找 X。我见过不少新手把关闭按钮放底部，用户满屏找。右上角放个 × 字符，加个 hover 效果，体验立刻不一样。代码长这样：

<div style="position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;line-height:1" onclick="closePop()">&times;</div>

这个 X 的点击区域别做太小。手机端手指头粗，至少 30×30 像素，不然点不准。我吃过这亏，用户反馈“关不掉”，其实是点偏了。

定时自动消失的轻提示

有些场景不需要用户操作，比如“保存成功”。弹个窗还得点一下，烦。这时候用轻提示，2 秒后自己消失。实现思路：创建一个 div，加动画，setTimeout 删掉。我常用这段：

function toast(msg, duration = 2000) {  var t = document.createElement('div'); t.textContent = msg; t.style.cssText = 'position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:4px;z-index:9999;opacity:0;transition:opacity .3s'; document.body.appendChild(t); requestAnimationFrame(() => t.style.opacity = '1'); setTimeout(() => {  t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, duration); }

注意那个 requestAnimationFrame，不加的话，浏览器可能把初始透明度和最终透明度合并，导致没有过渡动画。这算是个性能相关的小技巧。

iframe 弹窗的适用场景

有时候弹窗里要放另一个页面，比如用户协议。用 iframe 省事，但坑也不少。iframe 里的内容不受父页面 CSS 控制，样式得独立加载。而且它在移动端体验很差，滚动起来手指得在 iframe 里划半天。我一般只在后台管理系统里用 iframe 弹窗，前台页面基本不用。

安全性和性能的提醒

写弹窗时，z-index 别乱设。有人图省事写个 999999，结果页面里其他浮层全被盖住。我习惯给弹窗定个规范：普通弹窗 1000，全屏弹窗 1100，loading 提示 1200。层级分明，后面维护不头疼。

还有，弹窗内容如果涉及用户输入，一定要做转义处理。别直接把用户输入插进 HTML，不然 XSS 漏洞分分钟教你做人。用 textContent 代替 innerHTML 能省掉一半麻烦。

弹窗这东西，写多了你会发现，难点不在弹窗本身，而在怎么让用户不讨厌它。少弹、快关、不挡路，比什么炫酷动画都实在。