真的，每次看到那种弹窗遮罩层做得跟屎一样的网站，我就想砸键盘。很多新手做前端，觉得遮罩层不就是加个半透明背景嘛，随便写两行CSS完事。大错特错！今天我就来扒一扒遮罩层怎么做网页才能既美观又不掉坑里，全是血泪教训换来的干货。
先说个真事。上周有个朋友找我救火，说他接了个外包，客户嫌弹窗遮罩层点击穿透，点了遮罩还能滚动底下的页面，而且遮罩层颜色太深，用户根本看不清内容。我一看代码，好家伙，直接给body加了个fixed定位的div，背景色rgba(0,0,0,0.5)，z-index设了999。这操作，说难听点，就是耍流氓。
遮罩层怎么做网页？第一步，别急着写样式，先想清楚层级关系。很多小白不知道z-index是个坑。如果你把遮罩层的z-index设得比弹窗还低，那弹窗就显示不出来了；设得比页面所有元素都高，又可能挡住导航栏或者悬浮按钮。我一般建议，遮罩层z-index设在1000左右，弹窗在1001，这样既保证了层级，又不会跟第三方插件冲突。
再说颜色。别一上来就用纯黑透明，那样太压抑，用户体验极差。我习惯用rgba(0,0,0,0.6)或者稍微带点蓝调的黑色，比如rgba(20,20,30,0.7)，这样看起来更有质感，也不会完全遮挡背景内容。有个数据对比，我在测试时发现，透明度在0.5到0.7之间，用户的停留时间最长，低于0.3用户会觉得没反应，高于0.8用户会觉得太暗看不清。
还有个大坑，就是点击遮罩关闭。很多教程说给遮罩层加个click事件，return false。别这么干！这样会导致底下的内容无法滚动，或者在某些移动端浏览器上出现卡顿。正确做法是，给遮罩层加一个pointer-events: none，然后让弹窗容器本身处理点击事件。或者，更优雅的做法是，监听整个页面的点击事件，判断点击目标是否在弹窗内部，如果不在，就关闭弹窗。
我有个案例，之前做一个电商活动页，遮罩层做了个毛玻璃效果。很多同行问我怎么实现，其实不用复杂的JS库，CSS backdrop-filter: blur(10px)就能搞定。但是要注意兼容性，iOS 10.1以下不支持，安卓部分机型也有问题。所以，为了保险起见，我会加个背景色作为fallback。
另外，遮罩层的动画效果也很重要。直接显示/隐藏太生硬，用户会感到突兀。我习惯用opacity和transform结合，加个0.3s的ease-out过渡。这样弹窗出现时，会有一个轻微的放大效果，显得更自然。
最后，别忘了无障碍访问。很多开发者忽略了这点。遮罩层出现时，应该把焦点锁定在弹窗内，按Tab键只能在弹窗元素间切换，按Esc键关闭弹窗。这不仅是规范，更是体现产品温度的地方。
总结一下，遮罩层怎么做网页，不是简单的代码堆砌，而是对用户体验的细致打磨。从层级、颜色、交互到动画，每一个环节都不能马虎。希望这些经验能帮到你，别像我当年一样踩那么多坑。
如果你还在为遮罩层的细节头疼，或者想优化现有的弹窗体验，欢迎随时来聊。咱们一起把产品做得更精致点。
