遮罩层需用position: fixed全屏覆盖且z-index≥1040，模态框用绝对定位加transform居中，配合is-active/is-open状态类实现过渡动画，并通过less变量管理响应式断点与主题色。
遮罩层 .overlay 必须用固定定位且覆盖整个视口
遮罩层不是简单加个半透明背景就完事——它得真正“罩住”所有内容，包括滚动区域。常见错误是用 position: absolute 或忘了设置 z-index，导致模态框被其他元素盖住或遮罩只盖住局部。
正确写法要确保三点：全屏覆盖、不随滚动偏移、层级足够高：
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1040; // 比 Bootstrap 的 modal-backdrop 高一级，留出余量
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
-
fixed是硬性要求，absolute在有父级transform或scroll时会失效 -
z-index建议设为 1040+，避免和第三方 UI 库（如 Ant Design 默认 1000）冲突 - 别直接写
display: none——用opacity+transition才能配合 JS 控制显隐动画
模态框 .modal 要居中且脱离文档流
模态框本身不能靠 margin: auto 居中，因为它的父容器是 fixed 遮罩层，必须用绝对定位 + transform 做真居中。否则在不同屏幕尺寸下容易偏移或溢出。
关键点在于：宽高可变、垂直水平居中、不触发滚动条、支持键盘焦点管理（虽 Less 不管 JS，但样式要预留空间）：
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 80vh;
width: 500px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1050; // 比 overlay 高一级
outline: 0; // 移除默认 focus 轮廓，由 JS 控制可访问性焦点
}
-
transform: translate(-50%, -50%)是最稳定居中方案，比top: 50%; margin-top: -half-height更安全 -
max-width/max-height防止在小屏上溢出，同时保留width保证大屏下不过宽 - 别给
.modal设overflow: hidden——内容超出应由内部滚动控制，否则剪切掉滚动条或阴影
混合使用时，.overlay.is-active 和 .modal.is-open 要联动控制显隐
Less 里没法监听状态变化，但可以预设好状态类的样式映射。很多人把显隐逻辑全塞进 JS，结果样式和行为脱节，比如遮罩层显示了但模态框没动，或者过渡不同步。
推荐用两个独立状态类，通过嵌套规则统一控制过渡节奏：
.overlay.is-active,
.modal.is-open {
opacity: 1;
}
.overlay.is-active ~ .modal.is-open {
// 确保模态框只在遮罩激活时才生效（假设 DOM 结构是兄弟关系）
animation: modal-fade-in 0.3s cubic-bezier(0.2, 0, 0.1, 1);
}
@keyframes modal-fade-in {
from { opacity: 0; transform: translate(-50%, -40%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
- 用
is-active/is-open这类语义化类名，比show/hidden更易维护 - 避免用
!important强行覆盖，而是靠选择器权重（如.overlay.is-active ~ .modal.is-open）精准命中 - 遮罩层和模态框的过渡时间最好一致或略有错位（如遮罩 0.15s，模态框 0.3s），视觉更自然
响应式断点要单独抽离变量，别硬编码像素值
通用样式意味着要适配移动端。直接在 .modal 里写 @media (max-width: 768px) 看似简单，但一旦多个组件共用同一套遮罩逻辑，维护成本飙升。
Less 的变量和函数机制正好用来解耦尺寸逻辑：
@modal-max-width-mobile: 95vw;
@modal-max-width-tablet: 80vw;
@modal-max-width-desktop: 500px;
.modal {
max-width: @modal-max-width-desktop;
@media (max-width: 768px) {
max-width: @modal-max-width-mobile;
}
@media (min-width: 769px) and (max-width: 1024px) {
max-width: @modal-max-width-tablet;
}
}
- 变量命名带设备前缀（
-mobile/-tablet），避免后续误用 - 断点值不要复用 Bootstrap 或 Tailwind 的默认值，按自己项目真实设计稿来定
- 遮罩层的
background-color在深色模式下可能需要调整，建议用@overlay-bg: rgba(0, 0, 0, 0.6)变量统一管理
focus 状态处理和键盘 Esc 关闭时的样式同步——Less 只管静态样式，但遮罩层显隐后，焦点必须回到触发按钮，否则可访问性直接崩掉。这部分得靠 JS 补全，样式只是基础支撑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
