CSS 实现一个弹窗（Modal）的大致思路？

⚡ 速记答案（30 秒）

遮罩层：position:fixed; inset:0; background:rgba(0,0,0,0.45)。弹窗主体：position:absolute 或 Flex 居中，设置背景、圆角、阴影。关闭按钮：右上角 position:absolute。动画：opacity + transform(scale/translateY) 做淡入缩放。

📖 详细讲解

标准面试回答（推荐记住）

实现弹窗主要分几个部分。首先是遮罩层，position: fixed 覆盖整个视口，inset: 0 等于 top/right/bottom/left 都为 0，背景色用半透明黑色。然后是弹窗主体，可以用 Flex 居中或绝对定位加 transform 居中，设置白色背景、圆角、阴影。关闭按钮放在右上角用 position: absolute。最后可以加入口动画，opacity 从 0 到 1 淡入，transform: scale 从 0.8 到 1 缩放进入，用 transition 过渡。

✅ 面试要点

•遮罩层 fixed + inset:0
•弹窗用 Flex 居中
•加入淡入动画效果

💻 代码示例

Modal 弹窗

<style>
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: #1a1a1a;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative;
  animation: fadeIn 0.3s ease;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
</style>

🎨 效果预览