← 返回目录

18. 实战：模态弹窗与删除二次确认

这是弹窗三件套：遮罩 mask（fixed 铺满全屏、半透明） + 居中弹窗 + 点遮罩空白处关闭。删除用事件委托，弹二次确认；最后讲原生 reset() 和自己清空的区别。

18.1 实战（开弹窗、点删除确认、试重置）

18.2 核心代码拆解

① 模态弹窗：遮罩 + 居中

先做一张铺满全屏的半透明黑纸（遮罩），再在中间放一个白盒子。

let mask = document.createElement('div'); // 折一张半透明黑纸（遮罩）
mask.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;' // 铺满全屏
  + 'background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;'; // 半透明+居中
let dialog = document.createElement('div'); // 再折中间那个白盒子
mask.appendChild(dialog); // 把白盒子放进黑纸里
document.body.appendChild(mask); // 最后整张贴到页面上，弹窗就出来了
	

② 点遮罩关闭：判断 e.target === mask

如果你点弹窗内部也关了，多半是没判断 e.target。因为点弹窗里的东西，事件也会冒泡到遮罩；要判断"点中的就是遮罩本身（e.target === mask）"才算点空白处。

mask.addEventListener('click', function (e) { // 点遮罩时跑
  if (e.target === mask) mask.remove(); // 只有点中的就是遮罩本身（空白）才关
});
	

③ 删除二次确认 + 事件委托

let list = document.getElementById('userList'); // 抓到用户列表
let targetLi = null;   // 先空着，等会记住要删的那一行
list.addEventListener('click', function (e) { // 只给列表绑一次（委托）
  if (e.target.className === 'del') { // 点中的是不是删除按钮
    targetLi = e.target.parentElement; // 委托：找到它爹，也就是那一行
    // 弹确认框…点"确认" → targetLi.remove()
  }
});
	

④ 原生 reset() vs 自己清空

如果你以为 reset() 是清空，会发现输入框变回了"初始值"。因为 reset() 是"恢复到 HTML 里写死的初始值"，不是清空；想真清空，得自己遍历把 value 设成空、checked 设成 false。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：删除二次确认、详情弹窗、提示框、表单重置。

② 常见坑：点弹窗内部也关了；以为 reset() 是清空结果变回初始值。

③ 怎么解决：点遮罩关闭要判 e.target === mask；reset() 是恢复初始值，要真清空手动遍历。