window.open()需用户主动触发，否则被拦截；需检测兼容性并用showmodal()，禁用外部点击应监听close事件而非阻止事件；居中与动画优先用css实现。
用 window.open() 打开新窗口，但注意它常被浏览器拦截
现代浏览器默认拦截非用户主动触发的 window.open() 调用。比如在异步回调（setTimeout、fetch.then）里直接调用，基本都会失败，控制台报 Blocked opening 'xxx' in a new window because the request was made without user activation.
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须绑定在用户可点击的事件上，如
onclick或addEventListener('click', ...) - 不要在
promise回调、setTimeout(..., 100)或 API 响应后才调用 - 如果需动态构造 URL，确保整个调用链在点击事件同步执行路径内完成
- 参数中
features字符串（如'width=600,height=400'）不能含空格，否则部分浏览器忽略整段配置
用 dialog 元素做模态弹窗，兼容性需兜底
<dialog></dialog> 是原生语义化弹窗方案，支持 showModal()、close()，还自带 backdrop 和焦点锁定。但它在 safari 15.4 之前不支持，旧版 edge 也不行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：
if ('showModal' in htmlDialogElement.prototype)，不支持时降级为div+ 手动控制display和tabindex - 必须用
showModal()（不是show()）才能获得模态行为（禁用背景交互、Esc 关闭、聚焦限制） -
<dialog></dialog>默认无样式，至少加position: fixed和margin: auto居中，否则可能贴左上角 - 关闭时记得调用
dialog.close()，否则open属性仍为true，影响后续判断
阻止 dialog 外部点击关闭，但别破坏可访问性
默认点击 <dialog></dialog> 的 backdrop 会触发 close 事件。想禁止，常见错误是监听 click 并 stopPropagation() —— 这会让屏幕阅读器无法感知关闭动作，也破坏键盘 Esc 行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 真正安全的做法是：保留 backdrop 点击关闭，但把业务逻辑移到
dialog.addEventListener('close', ...)中处理，而不是依赖 dom 事件拦截 - 如果确实需要“不可关闭”，请改用
<div role="dialog"> + 手动管理状态，并显式设置 <code>aria-modal="true"和aria-hidden控制背景 - 任何时候都别移除
dialog的close方法或屏蔽Esc键，这违反 WCAG 最低可访问性标准 - 对
<dialog></dialog>或弹窗容器，用position: fixed; top: 0; left: 0; width: 100%; height: 100%铺满视口，再用display: flex; align-items: center; justify-content: center居中内容 - 动画用
transition: opacity 0.2s, transform 0.2s，配合opacity和scale，比操作top更流畅且不触发重排 - 避免在 JS 中读取
offsetWidth后再设left，尤其在resize或orientationchange时容易抖动
用 CSS 实现居中和动画，避免 js 操控偏移量
很多手写弹窗靠 top/left + transform 计算位置，结果在缩放、滚动或高 DPI 屏幕下错位。更稳的方式是交由 CSS 处理布局和过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
多数人卡在「为什么点不动」或「关不掉」，其实根源不在代码多难写，而在没分清：哪些行为是浏览器强制的（如 window.open 拦截），哪些是规范要求的（如 dialog 的模态语义），哪些只是习惯写法（如手动计算 left/top）。按住这几个边界去调试，比堆 CSS 或补 JS 更省时间。