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

实战：模态弹窗 + 删除二次确认。点删除弹出确认框，确认才真删。

核心三步：
① 点删除——显示弹窗
② 点确认——执行删除，关弹窗
③ 点取消/遮罩——关弹窗不删

坑：弹窗要阻止冒泡、遮罩点击关弹窗用事件委托、删除要从 DOM 移除。

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() 是恢复初始值，要真清空手动遍历。

本页重点