简介这份资源面向Web前端初学者与需要快速集成弹窗效果的开发者围绕“漂亮的div弹窗”这一主题提供多种可直接运行的页面弹窗实现方案帮助解决通知、提示、对话框等交互场景下的样式与兼容性问题。压缩包共20个文件以11个js脚本、6个html页面和3个css样式表为主js负责显示隐藏与拖动逻辑html搭建弹窗结构css控制圆角、半透明背景与动画整体约71KB轻量易读。内容涵盖圆角与方角、有背景与无背景、可拖动、可缩放、由下向上滑、单击边界外隐藏等多种流行效果并针对IE、Firefox、Chrome等主流浏览器做了兼容处理还涉及模态与非模态、定位及响应式设计等知识点。目前已有881人学习适合拿来即用或作为前端交互练习的参考素材。1. 漂亮的div弹窗从“能弹”到“弹得好看”的分水岭很多前端项目里弹窗是那种“功能有了但谁都不想点开看第二眼”的组件。一个绝对定位的 div加个半透明遮罩内容往里一塞能关能开就算交差。直到某天产品经理截了个图丢过来说“这个弹窗能不能做得像样一点”你才发现自己写的那个 div 弹窗边框是浏览器默认的阴影是没有的动画是硬切的移动端一打开还会被键盘顶飞。漂亮的 div 弹窗核心不是“弹窗”两个字而是“漂亮”背后的那套工程约束视觉层次怎么用纯 CSS 撑起来、进出场动画怎么不卡顿、遮罩层怎么处理滚动穿透、焦点怎么锁在弹窗内部、移动端安全区怎么适配。这些问题不解决弹窗就只是一个会浮起来的 div谈不上漂亮。这篇文章面向的是已经写过弹窗、但想把它做到“能直接放进生产环境”的前端开发者。我会从结构设计讲到动画参数再到焦点管理和移动端适配中间穿插我自己踩过的坑。读完你至少能拿到一个可复用的弹窗骨架知道每个参数为什么这么设以及哪些地方最容易翻车。2. 弹窗的 DOM 结构与视觉分层为什么你的 div 看起来“廉价”2.1 三层结构遮罩、定位容器、内容面板很多人写弹窗只写两层一个遮罩 div一个内容 div。遮罩负责变暗背景内容负责显示。这种写法在简单场景下能用但一旦遇到“弹窗需要居中且内容可滚动”的需求就会开始打架——内容一高整个弹窗就顶到屏幕外面去了。我一般会用三层结构!-- 遮罩层负责背景变暗和点击关闭 -- div classmodal-mask>.modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .modal-positioner { width: 100%; max-width: 520px; display: flex; justify-content: center; } .modal-panel { width: 100%; max-height: calc(100vh - 48px); background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; overflow: hidden; } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }这里有几个参数值得说清楚。padding: 24px是给遮罩层留的安全边距防止弹窗在窄屏上贴边。max-height: calc(100vh - 48px)保证弹窗永远不会超出视口48px 就是上下各 24px 的边距之和。border-radius: 12px是当前主流设计系统里比较安全的圆角值再大就显得圆润过头再小就显得生硬。box-shadow的0 12px 40px是垂直偏移 12px、模糊半径 40px这个组合能让弹窗有“浮起来”的感觉又不会像默认阴影那样糊成一团。2.2 视觉分层用 CSS 变量把主题抽出来弹窗的“漂亮”很大程度上取决于颜色和阴影的协调。如果每个弹窗都硬编码颜色改主题的时候就是灾难。我习惯用 CSS 变量把弹窗的视觉参数抽出来:root { --modal-bg: #ffffff; --modal-radius: 12px; --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); --modal-mask-bg: rgba(0, 0, 0, 0.45); --modal-header-border: #f0f0f0; --modal-text-primary: #1a1a1a; --modal-text-secondary: #666666; } .modal-panel { background: var(--modal-bg); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); } .modal-header { padding: 16px 24px; font-size: 16px; font-weight: 600; color: var(--modal-text-primary); border-bottom: 1px solid var(--modal-header-border); }这样做的好处是暗色模式只需要覆盖这几个变量弹窗整体就跟着变了不需要去改每个选择器。而且变量名本身就是文档后面接手的人一看就知道这个值控制什么。注意CSS 变量在:root上定义时如果弹窗是挂载在body下的变量会正常继承。但如果弹窗是通过document.body.appendChild动态插入的确保插入时机在样式加载之后否则会出现短暂的无样式闪烁。3. 进出场动画怎么让弹窗“弹”得自然而不是硬切3.1 用 transform 和 opacity 做组合动画弹窗动画最容易犯的错是只做 opacity 渐变或者只做 scale 缩放。只做 opacity弹窗像是“淡入”的没有空间感只做 scale弹窗像是“从无到有”蹦出来的缺少过渡。我一般会把两者组合起来.modal-mask { opacity: 0; transition: opacity 0.25s ease; } .modal-mask.is-open { opacity: 1; } .modal-panel { transform: scale(0.92) translateY(8px); opacity: 0; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; } .modal-mask.is-open .modal-panel { transform: scale(1) translateY(0); opacity: 1; }这里的cubic-bezier(0.34, 1.56, 0.64, 1)是一个带轻微回弹的缓动曲线。1.56这个值让 scale 在到达 1 之前稍微超过一点产生“弹”的感觉。但注意不要用太大的回弹否则弹窗会像果冻一样晃显得廉价。translateY(8px)是让弹窗从下方稍微上移增加方向感。关闭动画不能直接移除 DOM否则动画来不及播。我一般会先移除is-open类等transitionend事件触发后再移除 DOMfunction closeModal(maskEl) { maskEl.classList.remove(is-open); maskEl.addEventListener(transitionend, function handler(e) { if (e.propertyName opacity) { maskEl.remove(); maskEl.removeEventListener(transitionend, handler); } }); }这里监听opacity而不是transform因为遮罩层的 opacity 过渡时间最长等它结束再移除最稳妥。如果只监听transform面板动画先结束遮罩还在淡出DOM 就被移除了会看到闪一下。3.2 减少重排动画属性只碰 transform 和 opacity弹窗动画卡顿的常见原因是动画属性触发了 layout 或 paint。比如用top、left、width、height做动画每一帧浏览器都要重新计算布局弹窗一多就掉帧。我坚持只对transform和opacity做动画这两个属性走的是合成层不触发重排。如果你需要弹窗从某个按钮位置“展开”可以用transform-origin配合 scale.modal-panel { transform-origin: var(--origin-x, 50%) var(--origin-y, 50%); }然后在 JS 里根据触发按钮的位置计算--origin-x和--origin-y这样弹窗会从按钮方向展开视觉上更连贯。但注意transform-origin的变化本身不触发重排所以是安全的。提示如果弹窗内容很复杂可以在打开时给面板加will-change: transform, opacity;让浏览器提前提升合成层。但不要在关闭后一直保留否则会占用显存。我一般在transitionend后移除这个属性。4. 焦点管理与滚动穿透弹窗打开后那些“看不见”的坑4.1 焦点锁定让 Tab 键只在弹窗里转弹窗打开后如果用户按 Tab 键焦点会跑到弹窗背后的页面元素上这是可访问性的大忌。我一般会在弹窗打开时做三件事记录当前焦点元素、把焦点移到弹窗内第一个可聚焦元素、监听 Tab 键把焦点锁在弹窗内。function trapFocus(panelEl) { const focusableSelectors [ a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex-1]) ].join(,); const focusableEls panelEl.querySelectorAll(focusableSelectors); if (focusableEls.length 0) return; const firstEl focusableEls[0]; const lastEl focusableEls[focusableEls.length - 1]; panelEl.addEventListener(keydown, function (e) { if (e.key ! Tab) return; if (e.shiftKey document.activeElement firstEl) { e.preventDefault(); lastEl.focus(); } else if (!e.shiftKey document.activeElement lastEl) { e.preventDefault(); firstEl.focus(); } }); firstEl.focus(); }这段代码的逻辑是找到弹窗内所有可聚焦元素如果按 Tab 时焦点在最后一个元素上就跳回第一个如果按 ShiftTab 时焦点在第一个元素上就跳到最后一个。这样焦点就被“锁”在弹窗里了。关闭弹窗时要把焦点还给打开弹窗的那个按钮否则用户会丢失上下文let previousActiveElement null; function openModal() { previousActiveElement document.activeElement; // ... 显示弹窗 trapFocus(panelEl); } function closeModal() { // ... 隐藏弹窗 if (previousActiveElement) { previousActiveElement.focus(); } }4.2 滚动穿透弹窗打开时背景不能滚滚动穿透是移动端弹窗最烦人的问题之一。弹窗打开后用户在弹窗上滑动背景页面跟着滚体验很差。常见的解法是给body加overflow: hidden但这样会导致页面滚动位置丢失关闭弹窗后跳回顶部。我一般用position: fixed方案来保留滚动位置let scrollY 0; function lockScroll() { scrollY window.scrollY; document.body.style.position fixed; document.body.style.top -${scrollY}px; document.body.style.width 100%; } function unlockScroll() { document.body.style.position ; document.body.style.top ; document.body.style.width ; window.scrollTo(0, scrollY); }这个方案在打开弹窗时把 body 固定住记录当前滚动位置关闭时恢复。注意width: 100%是必须的否则 body 固定后宽度会塌缩。注意如果弹窗内部也需要滚动确保.modal-body有overflow-y: auto和-webkit-overflow-scrolling: touch;这样 iOS 上的滚动惯性才正常。5. 避坑与排查弹窗开发中最容易翻车的 4 个场景5.1 弹窗打开后位置偏移或闪烁现象弹窗打开瞬间面板先出现在左上角然后跳到中间或者整个弹窗闪一下。原因通常是 CSS 还没加载完弹窗 DOM 就已经插入并显示了。或者动画初始状态没有提前设好浏览器先渲染了默认状态再应用动画。解决弹窗 DOM 插入后先让它保持隐藏状态opacity: 0; visibility: hidden;等下一帧再添加is-open类。可以用requestAnimationFrame来确保样式已经计算requestAnimationFrame(() { maskEl.classList.add(is-open); });5.2 移动端键盘弹出把弹窗顶飞现象在手机上弹窗里有输入框点击输入框后键盘弹出弹窗被顶到屏幕上方甚至超出视口。原因移动端键盘弹出时视口高度会变化100vh会跟着变但position: fixed的元素不会自动调整。解决用dvh替代vh或者用visualViewportAPI 监听视口变化.modal-panel { max-height: calc(100dvh - 48px); }dvh是动态视口高度会随键盘弹出自动调整。如果浏览器不支持可以用visualViewport做降级if (window.visualViewport) { window.visualViewport.addEventListener(resize, () { const panel document.querySelector(.modal-panel); if (panel) { panel.style.maxHeight ${window.visualViewport.height - 48}px; } }); }5.3 多个弹窗叠加时 z-index 混乱现象弹窗 A 打开后弹窗 B 从 A 里面打开结果 B 被 A 遮住了。原因z-index 写死了两个弹窗用了同一个值后插入的 DOM 不一定在上面。解决用一个全局计数器管理 z-indexlet zIndexCounter 1000; function getNextZIndex() { return zIndexCounter; } // 打开弹窗时 maskEl.style.zIndex getNextZIndex();这样每打开一个弹窗z-index 就加一保证后打开的永远在上面。关闭弹窗时不需要减因为计数器只增不减不会冲突。5.4 弹窗关闭后页面滚动位置丢失现象弹窗关闭后页面跳回了顶部用户需要重新滚回去。原因用了overflow: hidden锁滚动但没有记录和恢复滚动位置。解决用前面提到的position: fixed方案记录scrollY关闭时window.scrollTo(0, scrollY)恢复。如果用的是overflow: hidden至少也要在关闭时把scrollTop恢复回去。6. 进阶技巧用原生 dialog 元素做弹窗以及一个验证清单6.1 原生 dialog 的取舍HTML 有一个原生dialog元素自带遮罩、焦点管理和 ESC 关闭。用起来很简单dialog idmyDialog p这是一个原生弹窗/p button onclickdocument.getElementById(myDialog).close()关闭/button /dialog script document.getElementById(myDialog).showModal(); /script原生 dialog 的好处是焦点管理和 ESC 关闭是浏览器内置的不需要自己写。但它的样式控制比较受限::backdrop伪元素只能改背景色动画支持也不如自定义 div 灵活。我一般会在“内部工具、后台管理”这类对视觉要求不高的场景用原生 dialog在“面向用户、需要精细动画”的场景用自定义 div。如果你决定用原生 dialog记得处理::backdrop的动画dialog::backdrop { background: rgba(0, 0, 0, 0.45); animation: fadeIn 0.25s ease; } keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }6.2 上线前的验证清单弹窗做完后我一般会过一遍这个清单确认没有遗漏检查项验证方式常见问题焦点锁定打开弹窗后按 Tab 键焦点跑到背景页面滚动穿透弹窗打开时滑动背景背景跟着滚移动端键盘手机点击输入框弹窗被顶飞多弹窗叠加从弹窗 A 打开弹窗 BB 被 A 遮住关闭动画点击关闭按钮弹窗直接消失没有过渡焦点恢复关闭弹窗后焦点丢失不知道在哪暗色模式切换系统主题弹窗颜色不跟随安全区适配iPhone 刘海屏弹窗贴边或超出这个清单看起来简单但每一条我都至少踩过一次坑。尤其是焦点恢复和滚动穿透在开发阶段很容易忽略上线后用户反馈才被发现。6.3 一个我常用的弹窗封装习惯最后说一个我自己的习惯把弹窗的打开和关闭封装成 Promise这样调用方可以用await等待用户操作结果function showModal(options) { return new Promise((resolve) { const maskEl createModalElement(options); document.body.appendChild(maskEl); requestAnimationFrame(() { maskEl.classList.add(is-open); }); maskEl.addEventListener(click, (e) { if (e.target.dataset.close true) { closeModal(maskEl); resolve({ confirmed: false }); } }); maskEl.querySelector([data-confirm])?.addEventListener(click, () { closeModal(maskEl); resolve({ confirmed: true }); }); }); } // 调用 const result await showModal({ title: 确认删除 }); if (result.confirmed) { // 执行删除 }这样弹窗的调用方不需要关心 DOM 操作和动画细节只需要await结果。这个模式在表单确认、删除确认这类场景特别顺手。希望这些细节能帮你把那个“能弹”的 div 弹窗变成真正拿得出手的漂亮弹窗。本文还有配套的精品资源点击获取