现代浏览器拦截非用户触发的 window.open()，需绑定点击事件并传有效URL；dialog 元素语义好但兼容性差，需 polyfill；position: fixed 弹窗易受父级 transform 等影响而定位异常。
用 window.open() 打开新窗口，但别指望它真“弹窗”
现代浏览器默认拦截 window.open() 的弹窗行为，除非它由用户真实点击触发（比如 button 的 click 事件），且不能在异步回调（如 setTimeout、fetch.then）里调用。否则会静默失败，控制台可能只报 Blocked opening 'xxx' in a new window because the request was made without user activation.。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保调用
window.open()的函数直接绑定在用户可点击的元素上，比如<button onclick="openPopup()"></button> - 不要传空字符串作为 URL，至少用
'about:blank'或一个真实路径，避免某些浏览器拒绝打开 - 第二个参数（窗口名）建议设为唯一值（如
'popup_123'），否则重复调用可能复用旧窗口而非新开 - 第三个参数（特性字符串）要写全，比如
'width=600,height=400,left=100,top=100,scrollbars=yes,resizable=yes'；漏掉scrollbars可能导致内容溢出时无法滚动
用 dialog 元素做原生模态弹窗，兼容性要注意
<dialog></dialog> 是 HTML5 原生模态组件，语义清晰、自带 backdrop 和焦点管理，但 IE 完全不支持，Safari 直到 15.4 才支持 showModal()，旧版需加 polyfill 或降级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
dialog.showModal()触发显示，dialog.open = true无效 - 关闭时推荐用
dialog.close()，而不是dialog.open = false—— 后者不会移除 backdrop，也不触发close事件 - 记得给
<dialog></dialog>加role="dialog"和aria-modal="true"提升可访问性（尤其在 Safari 旧版本中） - CSS 中
dialog::backdrop可自定义遮罩层样式，但部分安卓 WebView 不支持该伪元素，需备选方案（如外层加<div class="backdrop">） <h3>阻止 <code>dialog点击 backdrop 关闭？小心影响键盘操作默认点击
<dialog></dialog>的 backdrop 会触发close事件。想禁用这个行为，常见做法是监听click并event.stopPropagation()，但这会同时阻止Escape键关闭和屏幕阅读器的交互逻辑。更稳妥的做法是：保留 backdrop 点击关闭，但把真正需要“不可关闭”的场景交给业务逻辑控制 —— 比如表单未保存时，在
dialog.close事件里调用event.preventDefault()，再弹提示。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要给
<dialog></dialog>外层套pointer-events: none，这会让整个弹窗失去焦点和键盘导航能力 - 如果真要禁用 backdrop 点击，优先改用
position: fixed+z-index自建弹层，而非 hack<dialog></dialog> - 务必测试
Tab键是否能在弹窗内循环，以及Escape是否仍有效 —— 这些是 WCAG 基础要求
用 CSS 实现“伪弹窗”，
position: fixed的陷阱在哪手动实现弹窗最常用的是
position: fixed+z-index，但它容易在嵌套transform、filter或will-change的父容器里失效 —— 因为这些属性会创建新的层叠上下文或包含块，导致fixed元素相对其定位，而非视口。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查弹窗父级是否有
transform: translateZ(0)、filter: blur(1px)等属性，有就删掉或移到更外层 - 弹窗本身加
contain: layout style paint可减少重排影响，但不要滥用，老版本 Chrome 不支持 - 移动端记得加
touch-action: manipulation防止 300ms 延迟，同时避免overflow: hidden写在body上导致页面“卡住”（iOS Safari 会忽略） - 如果弹窗含 iframe，注意
sandbox属性可能限制其脚本执行，调试时先去掉试试
真正难的不是写出能弹出来的代码，而是让弹窗在各种设备、各种嵌套结构、各种用户操作路径下都不失焦、不卡死、不误关 —— 尤其当它承载表单或实时协作内容时，一个没处理好的
focus转移或preventDefault就会让整个流程断掉。 - 不要给
