HTML弹窗筛选实现技巧全解析

关键点：

• 默认不渲染在顶层，需手动调用 showModal() —— 直接写 open 属性会跳过模态逻辑，失去遮罩和焦点锁定
• 关闭时建议用 dialog.close() 而非 dialog.removeAttribute('open')，否则 Safari 可能残留滚动条
• 样式上必须显式设置 backdrop 伪元素，例如：dialog::backdrop { background: rgba(0,0,0,0.5); }

筛选条件怎么组织才方便 JS 读取和重置

别把筛选项写成一堆孤立的 <input type="checkbox"> 或 <select>，而应按字段分组并赋予语义化结构。这样后续用 FormData 或 querySelectorAll('[name]') 才能准确提取值，也利于重置逻辑统一处理。

推荐结构：

• 每个筛选字段用
  包裹，name 属性设为字段标识（如 category、price_range）
• 多选用 <input type="checkbox" name="tag" value="vue">，单选用 radio，范围输入用 <input type="number" name="min_price"> + <input type="number" name="max_price">
• 重置按钮绑定 form.reset()，前提是整个筛选区是一个
  —— 不要漏掉 form 标签，否则 reset() 不触发 input 的初始值还原

点击确定后怎么把条件传给列表接口

筛选弹窗本身不负责请求数据，它只负责收集和格式化参数。常见错误是直接在弹窗里写 fetch()，导致逻辑耦合、难以复用、测试困难。

更合理的方式是让弹窗只暴露一个方法，比如 getFilters()，返回干净的对象：

function getFilters() {
  const form = this.querySelector('form');
  const data = new FormData(form);
  const obj = {};
  for (let [key, value] of data.entries()) {
    if (obj[key]) {
      if (!Array.isArray(obj[key])) obj[key] = [obj[key]];
      obj[key].push(value);
    } else {
      obj[key] = value;
    }
  }
  return obj;
}

调用方拿到对象后自行决定怎么用：拼 query string、塞进 body、传给 React 的 useEffect 等——分离关注点才是关键。

移动端点透和键盘焦点容易被忽略

在 iOS Safari 或部分安卓 WebView 中，弹窗打开后点空白处关闭，再快速点列表项，可能触发底层按钮 —— 这是点透（click-through），根源是弹窗未真正阻断事件流。除了用