简介一套基于div的网页弹窗效果示例集主要面向初中级前端开发者解决页面交互中弹窗样式与兼容性设计问题适用于活动弹窗、提示框、表单对话框等常见场景。资源共20个文件包含11个JavaScript、6个HTML和3个CSS压缩包仅71KB小巧实用通过真实demo展示圆角/方角、半透明背景、可拖动、缩放/滑动出现、单击边界外隐藏等多种弹窗形态兼顾模态与非模态场景。已有881人学习下载。代码结构清晰JS负责显示隐藏与拖动逻辑CSS控制视觉样式与过渡动画HTML提供基础骨架适合直接套用或改造作者还针对IE、Firefox、Chrome等主流浏览器做了兼容处理各示例按文件夹独立组织方便按需挑选使用能让开发者在真实项目中快速落地美观且功能完整的弹窗组件。 做前端这些年来我发现自己和“弹窗”打了无数次交道产品经理一句话“这里加个漂亮的div弹窗”听着只是一个小窗口的事可真做起来从层级、定位、滚动穿透、焦点管理到移动端适配每一环都能给你挖个坑。尤其是当这个弹窗还要承载登录表单、活动营销、用户确认等核心交互时它就已经不是“加个div”这么简单了。这篇文章我把手写div弹窗的完整思路梳理一遍包括结构、样式、动画、交互、响应式和常驻坑位适合刚入行的前端也适合被各种组件库定制折磨过的老手。1. 为什么我还在手写div弹窗先聊聊选型很多朋友看到“弹窗”两个字第一反应是“组件库不都有现成的Modal吗一行代码就出来了为什么要自己写”这个问题我以前也认真纠结过后来在项目里陆续碰到几种情况彻底改变了自己的判断。第一种情况是项目本身很轻比如运营活动页、企业落地页、老项目里的一个局部模块为了弹一个窗引入几十KB甚至上百KB的UI组件库成本怎么看都不划算。第二种情况是组件库定制太费劲UI框架自带的Modal功能很全但默认风格非常“有辨识度”当设计稿要求完全不一样的圆角、阴影、动效和内部结构时你需要写一堆覆盖样式去跟框架搏斗。第三种情况是组件库的行为边界不够灵活比如“点击遮罩时不关闭”“弹窗打开时内部可以独立滚动”“关闭后完全销毁DOM”这些需求组件库不一定都支持配置来配置去总会卡在某一个边界场景上。后来我给自己定了一个判断标准如果整个项目所有页面都在大规模共用弹窗组件库一定更省心但如果只是少数页面需要高度定制的弹窗自己手写一个div弹窗的性价比反而更高。弹窗这个东西本质上不是一个复杂控件它就是“一个遮罩层 一个浮层面板 一个显示开关”。先把这三件事彻底想明白剩下的一切细节都是给它们做优化。为了说得更直观一点我把几种方案的取舍放在下面这个表格里方案优点劣势原生 alert / confirm零依赖、浏览器原生样式完全不可控结构不能自定义UI组件库 Modal功能全、交互完善、无障碍支持好体积大定制样式受框架限制原生dialog语义化、自带焦点管理和Esc关闭兼容性和样式自由度仍需要额外处理部分浏览器行为不一致手写div弹窗轻量、完全可控、适配任何设计稿焦点管理、无障碍、滚动锁定等需要自己处理这里不是要劝所有人在所有场景都手写而是提醒自己别忘了第三和第四种选择。组件库确实省心但实现“一个漂亮的div弹窗”这件事手写能带来的控制感是组件库给不了的。尤其是当你需要在弹窗里放自定义表单、嵌图表、做步骤引导时“完全可控”四个字值回所有成本。2. 先把骨架打稳HTML结构和基础居中样式弹窗的HTML结构不需要花哨但每一层都有它存在的理由。我的一贯写法是“遮罩层包着弹窗面板”弹窗面板内部再分成头部、内容区、底部操作区三块。很多初学者图省事把遮罩和面板做成兄弟节点或者用一个div同时冒充两个角色这种偷懒后面基本都要还债。下面这个结构是我在多个项目里反复使用的div classmodal-overlay idmodalOverlay div classmodal roledialog aria-modaltrue aria-labelledbymodalTitle div classmodal-header h3 idmodalTitle确认操作/h3 button classmodal-close typebutton aria-label关闭×/button /div div classmodal-body p弹窗内容区域可以放表单、图片、文字等任意内容。/p /div div classmodal-footer button classbtn btn-plain typebutton取消/button button classbtn btn-primary typebutton确定/button /div /div /div为什么必须是遮罩包着面板而不是两个平行div因为遮罩的职责是“盖住背景 承接点击外部关闭的语义”面板的职责是“承载内容 承接内部交互”。当两者是父子关系时你只需要在事件处理里判断“点击目标是不是遮罩自身”就够了逻辑非常干净。如果拆成两个平级元素你还要额外协调两者的显示、隐藏和层级纯属给自己加戏。基础样式方面遮罩层用固定定位铺满整个视口内部用flex把面板居中。这是我认为最稳妥的写法.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); } .modal { width: 480px; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; overflow: hidden; }position: fixed加inset: 0是现在最推荐的铺满写法比top: 0; right: 0; bottom: 0; left: 0更简洁。z-index: 1000也不是随手写的我习惯把弹窗层级统一放在1000以上页面里其他浮层比如下拉菜单、提示条、气泡统一放在100到999之间这样新来的人一看代码就知道弹窗是最高优先级。面板宽度的480px是一个适合大多数业务场景的中间值太窄放不下表单里的双列布局太宽在笔记本屏幕上会显得“糊脸”。max-width: calc(100vw - 32px)保证在窄屏设备上左右至少保留16px边距这个细节在Android和iPhone的浏览器里都有效。居中用flex而不是transform: translate(-50%, -50%)最大好处是代码直观、不依赖额外定位属性后面要做入场动画时也更灵活。3. 从“能看”到“漂亮”色彩、光影和动效的打磨一个div弹窗如果只是能用那它只是个弹窗。要想让用户第一眼觉得“这个弹窗做得不错”关键不在功能而在层次感。层次感这个词听着抽象落到CSS里就是三件事正确的阴影、合适的背景模糊、克制的配色。3.1 光影层次阴影和背景模糊我发现很多人写弹窗阴影只写一层比如box-shadow: 0 4px 12px rgba(0,0,0,0.15)。单层阴影的问题在于它像一张“贴纸”浮在半空缺少厚度和远近感。我常用的方案是三层阴影叠加.modal { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06), 0 24px 64px rgba(16, 24, 40, 0.14); }第一层负责贴近面板边缘的高光过渡第二层是主体投影第三层是远处的大面积柔光。三层叠在一起面板看起来才是真正“悬浮在页面上方”的物体而不是一张被风吹起来的纸片。这个技巧同样适用于卡片、下拉面板和抽屉属于那种学了就能立刻用的通用能力。遮罩层同样有优化空间。普通的半透明背景rgba(15, 23, 42, 0.45)只是把页面变暗但页面内容还是清晰的视觉上弹窗和页面还是“同一层”。加一行backdrop-filter: blur(6px)让背景稍微虚化弹窗立刻就拥有了独立的“空间分层”感这也是很多设计稿里弹窗看起来“高级”的核心原因。.modal-overlay { background: rgba(15, 23, 42, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }注意这里要写两行-webkit-前缀给Safari和部分旧版Chrome内核用。同时候补一个稳定的半透明底色万一某个浏览器不支持backdrop-filter遮罩至少还能通过背景色保证可读性不会出现页面背景一片清晰又发白的怪异效果。3.2 动效设计入场和退场动效是“漂亮”的最直接体现也是最容易翻车的地方。很多人第一次写弹窗动效时会发现transition对display: none到display: block的切换完全不生效。这是因为display不是可过渡属性元素从“不渲染”直接变成“渲染”没有中间状态给CSS去插值。正确做法是用opacity、transform和visibility配合。opacity管透明度transform管位移visibility在后面兜底保证元素在不可见时不响应点击。我给遮罩层和弹窗面板分别设计两套过渡.modal-overlay { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .modal-overlay.is-open { opacity: 1; visibility: visible; } .modal { opacity: 0; transform: translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease; } .modal-overlay.is-open .modal { opacity: 1; transform: translateY(0); }入场时面板从下方16px的位置滑上来同时透明度从0变为1整个过程250ms。这个数值我是反复试过的小于180ms会显得生硬大于300ms会让人觉得拖沓250ms刚好能传递“轻快但不敷衍”的感觉。退场时因为transition写在默认状态上取消is-open类就会自动反向播放动画不需要额外写退场逻辑。位移方向也可以根据弹窗类型调整普通确认弹窗用向上位移底部弹出的动作面板用向上位移更多偏工具类的气泡弹窗用轻微缩放。但无论哪种核心原则都一样——动效要给用户传达“这个窗口从哪来、现在是什么状态”的信息而不是为了炫技。3.3 一套可直接用的完整样式把这几个技巧综合起来我给出一个已经经过多个项目验证的样式版本.modal { position: relative; width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #ffffff; border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06), 0 24px 64px rgba(16, 24, 40, 0.14); opacity: 0; transform: translateY(16px); transition: opacity 0.25s ease, transform 0.25s ease; } .modal-overlay.is-open .modal { opacity: 1; transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; } .modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; line-height: 1.4; } .modal-close { width: 32px; height: 32px; border: none; border-radius: 8px; background: #f3f4f6; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .modal-close:hover { background: #e5e7eb; color: #111827; } .modal-body { padding: 0 24px; overflow-y: auto; color: #4b5563; font-size: 14px; line-height: 1.7; -webkit-overflow-scrolling: touch; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 24px; }这里把border-radius加大到了20px符合目前主流的卡片审美头部、内容区、底部操作区都是独立padding而不是整个面板一个大padding这样当内容区需要独立滚动时滚动条的视觉边界不会顶到弹窗边缘。关闭按钮单独用浅灰底衬托比一个光秃秃的“×”字符更有安全感鼠标放上去变色也给用户提供了明确的可点击反馈。4. 交互闭环遮罩点击、Esc关闭与滚动锁定一个弹窗再好看交互闭环没做好就还是半成品。我理解的完整闭环包括四件事打开、关闭、锁滚动、焦点管理。四件事里任何一件掉链子用户都会瞬间觉得“这个弹窗很业余”。4.1 打开与关闭的控制逻辑弹窗控制的JavaScript代码其实很短核心就两个函数const overlay document.getElementById(modalOverlay); const triggerBtn document.getElementById(triggerBtn); function openModal() { overlay.classList.add(is-open); lockScroll(); overlay.querySelector(.modal-close)?.focus(); } function closeModal() { overlay.classList.remove(is-open); unlockScroll(); triggerBtn.focus(); } overlay.addEventListener(click, (event) { if (event.target overlay) { closeModal(); } }); document.addEventListener(keydown, (event) { if (event.key Escape overlay.classList.contains(is-open)) { closeModal(); } });点击遮罩关闭的判断条件是event.target overlay。这个写法要归功于前面HTML结构里“遮罩包着面板”的设计如果用户点击到了面板内部事件目标就是面板的子元素不会触发关闭。很多新手在点击弹窗内部按钮时发现弹窗莫名关闭基本都是因为事件冒泡到遮罩层后判断条件写得太宽松。Esc关闭同样重要尤其是在用户填表填到一半时按Esc能让用户快速退出很多键盘重度用户会默认这是一个全屏界面应该有的行为。监听事件注册在document上但只处理“当前有弹窗打开”的情况避免没有任何弹窗时按Esc也触发无意义的判断。4.2 锁滚动和iOS兼容锁滚动是弹窗交互里最大的坑。最直接的做法是给body加overflow: hidden这个方案在PC端浏览器上完美工作但在iOS Safari上会失效——页面依然可以用手势上下滑动遮罩后面的内容会跟着滚动体验非常糟糕。兼容更好的方案是给body加position: fixed并在打开前记录当前滚动位置关闭后恢复let scrollTop 0; function lockScroll() { scrollTop window.scrollY || document.documentElement.scrollTop; document.body.style.position fixed; document.body.style.top -${scrollTop}px; document.body.style.left 0; document.body.style.right 0; } function unlockScroll() { document.body.style.position ; document.body.style.top ; document.body.style.left ; document.body.style.right ; window.scrollTo(0, scrollTop); }这个方案的原理是把body当前滚动位置“钉死”在视口顶部用户无论如何滑动滚动值都保持原来的位置不变从而阻止穿透滚动。关闭时先恢复body的定位属性再把窗口滚动到之前的坐标。注意window.scrollTo要放在清除样式之后执行否则浏览器会因为body的定位还没来得及恢复而跳不到正确的位置。4.3 焦点管理的小细节焦点管理是最容易被忽视、但对可访问性影响最大的一块。弹窗打开后键盘用户按Tab键时焦点应该进入弹窗并在弹窗内部循环而不是跑到页面背后的链接和按钮上。最简单的不完整实现是打开时把焦点放到关闭按钮或弹窗内第一个输入框关闭时把焦点还给触发弹窗的按钮。这两个步骤代码上只有一行但对屏幕阅读器用户来说意义非常重大。完整版的焦点循环需要监听Tab键在焦点离开弹窗边界时让它回到弹窗内部。这个逻辑大概十几行代码大致思路是维护一个弹窗内所有可聚焦元素的列表然后判断当前焦点位置overlay.addEventListener(keydown, (event) { if (event.key ! Tab) return; const focusable overlay.querySelectorAll(button, [href], input, select, textarea, [tabindex]:not([tabindex-1])); const first focusable[0]; const last focusable[focusable.length - 1]; if (event.shiftKey document.activeElement first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey document.activeElement last) { event.preventDefault(); first.focus(); } });如果项目暂时没精力做完整版我建议至少把前两行的聚焦和归还做好这两个操作成本最低、收益最明显。等有空再补全焦点循环效果会接近原生弹窗。5. 小屏幕上的弹窗高度约束、内部滚动与安全区移动端适配是弹窗的另一个分水岭。同一个弹窗在电脑上看着完美拿到手机上一打开常常出现“顶部跑出屏幕外”或者“底部按钮点不到”的问题。原因很简单手机屏幕的高度比桌面端“紧俏”得多弹窗一旦超过一屏浏览器不会自动帮你处理好滚动边界。我的处理方式是给弹窗面板设置max-height并把整个面板变成纵向弹性容器让内容区成为独立滚动区域.modal { max-height: calc(100vh - 32px); display: flex; flex-direction: column; } .modal-body { flex: 1; overflow-y: auto; }这样写之后头部和底部操作区始终固定显示内容区域超出时只在中间滚动。用户在任何屏幕尺寸下都能看到关闭按钮和确认按钮体验完全一致。这里有一个小细节max-height用calc(100vh - 32px)而不是100vh是因为手机浏览器顶部的地址栏和底部的虚拟按键会占掉一部分可视高度如果不留边距弹窗底部容易刚好被遮挡看着非常难受。苹果刘海屏设备还有一个安全区的问题。在iPhone上的全屏或横屏场景内容如果贴到屏幕底部会被Home Indicator区域盖住。我给.modal-footer增加安全区适配.modal-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }env(safe-area-inset-bottom)是iOS系统提供的一个环境变量表示底部安全区域的高度。配合max()函数可以保证在小屏设备上至少保留24px的默认间距在带刘海的设备上自动追加额外间距。安卓端大部分机型这个值是0不影响正常布局。移动端按钮的布局也值得单独说一句。弹窗底部操作区如果只有一个按钮让它靠右显示就好如果有两个按钮建议左“取消”右“确认”并且两个按钮宽度保持一致。很多设计稿会把两个按钮并排各占一半宽度这在手机上也完全可行但我个人更推荐让按钮自适应内容宽度看起来更轻巧不会给人用力过猛的感觉。.modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px max(24px, env(safe-area-inset-bottom)); } .modal-footer .btn { min-height: 40px; padding: 0 20px; border-radius: 10px; font-size: 14px; }min-height: 40px是移动端触控操作的一个基本舒适尺寸太小的话手指难以精准点按尤其对年长用户和指甲长者非常不友好。6. 这些年写弹窗踩过的坑一次说清楚这部分内容不是从文档里抄来的而是我一个个弹窗做过来、被线上用户和测试同学反复“教育”后沉淀下来的经验。每一个坑都真实存在写完这篇文章时看上去依然觉得自己很值得。6.1 transform会悄悄改变fixed定位这是弹窗类问题里最隐蔽的一个。position: fixed并不是无条件的“相对视口定位”如果弹窗的任意一层祖先元素设置了transform、filter或perspectivefixed定位就会退化为相对那个祖先元素进行定位。比如某个页面对外层容器加了一个轻微的缩放动画提升所谓的“性能”弹窗打开后就会出现“遮罩只盖住了容器那一块而不是整个页面”的情况。排查这个问题的思路很简单打开弹窗后打开浏览器DevTools沿着弹窗的DOM结构往上检查每一层祖元素看是否存在影响定位的属性。解决办法是尽量把弹窗挂到body直下层避免嵌在有transform的容器内部。如果是自己写的业务代码千万不要在弹窗祖先层级上随手加transform做动画这是给自己埋雷。6.2 backdrop-filter的兼容处理backdrop-filter这个属性在Chrome和Edge上表现很好但Safari需要-webkit-前缀且旧版本有各种奇怪的bug。比如有时背景模糊会让里面文字发虚有时又会出现锯齿感。我的处理原则是“把backdrop-filter当成渐进增强来用”遮罩层始终保留半透明背景色模糊效果能生效就是加分项不生效也不影响功能。不要在只写了backdrop-filter而没写background的情况下上线一旦浏览器不支持遮罩层会出现“背景全透 页面刺眼”的效果很影响观感。6.3 多弹窗和动画状态管理一个页面同时出现两个弹窗的情况并不罕见比如先弹登录提示用户点击后又弹表单窗口。如果两个弹窗的z-index写死成同一个值后打开的那个就可能被盖住。我给每个弹窗实例动态分配递增层级打开时从1000开始往上加let modalZIndex 1000; function openModal(overlay) { modalZIndex 1; overlay.style.zIndex modalZIndex; }另外还要注意关闭动画和display: none的顺序。很多人的关闭逻辑是“移除is-open类的同时把元素display设为none”这样退场动画永远不会播放因为元素在动画还没开始时就被移除了。正确做法是先移除is-open类通过transitionend事件等待退场动画结束后再真正隐藏元素或者用visibilityopacity这种“隐藏但不移除DOM”的方案让退场动画自然播完。如果项目里有多个弹窗需求我最后给出的建议是把弹窗封装成一个可配置的实例对外暴露open、close、destroy三个方法内部管理遮罩层级、滚动锁定和焦点循环。这样每个弹窗都是独立个体页面同时弹三个也不会互相干扰。连续几个项目我都只用不到一百行的这个工具类就覆盖了登录弹窗、确认弹窗、活动营销弹窗、表单弹窗等所有场景。以后再收到“这里加个漂亮的div弹窗”这种需求心态会稳很多结构、样式、动画、交互四件事一件件来不会翻车。本文还有配套的精品资源点击获取