原生 <dialog> 无法从点击位置展开，需手动计算坐标并设置 position + transform 动画：监听 click/touchstart，用 getBoundingClientRect() 获取尺寸，结合 clientX/Y 与 scrollY 计算 left/top，约束边界，并通过 scale(0)/opacity:0 初始态配合 transition 实现中心扩散效果。
dialog 默认不支持从点击位置展开，得自己控制定位和动画
原生 <dialog> 的 showModal() 和 show() 方法只负责显示/模态化，不提供定位或过渡能力。想让它“从鼠标点击处展开”，本质是绕过默认居中逻辑，手动设置 top/left，再配合 CSS 动画触发缩放或淡入。
用 getBoundingClientRect() + setAttribute 计算并设置弹出位置
不能直接用 event.clientX/clientY —— 那是视口坐标，而 <dialog> 定位需相对于其包含块（通常是 <body>），且要减去元素自身宽高的一半才能实现“以点击点为中心展开”。关键步骤：
- 监听触发按钮的
click事件，拿到event - 用
dialog.getBoundingClientRect()获取其自然尺寸（注意：此时 dialog 必须已渲染但 display: hidden 或 opacity: 0） - 计算目标
top和left：left = event.clientX - dialogWidth / 2top = event.clientY - dialogHeight / 2 - 用
dialog.style.left和dialog.style.top动态设置，并确保position: absolute或fixed
transition + transform 实现“从点击点扩散”的视觉效果
CSS 动画必须作用在 transform 上才高效，且初始状态要设为缩放为 0、透明度为 0，否则会闪一下。常见错误是只写 scale(0) 却忘了 opacity，或者没加 transform-origin: center 导致缩放中心偏移。
dialog {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 1em;
border: none;
border-radius: 4px;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
/* 初始隐藏且不可交互 */
opacity: 0;
transform: scale(0);
transition: opacity 0.2s ease, transform 0.2s ease;
transform-origin: center;
}
<p>dialog[open] {
opacity: 1;
transform: scale(1);
}注意：必须在 JS 中先设 dialog.showModal()（或 show()），再立即设置 style.left/top，否则浏览器可能跳过首次重排导致定位失效。
立即学习“前端免费学习笔记（深入）”；
移动端点击位置偏移、滚动后坐标错乱是高频坑
在 iOS Safari 或安卓 Chrome 中，clientX/Y 可能受缩放、地址栏隐藏/显示、页面滚动影响。更健壮的做法是用 event.touches[0]（触摸事件）+ window.scrollY 补偿：
- 优先监听
touchstart而非click（尤其移动端） - 取
event.touches[0].clientX和event.touches[0].clientY - 若页面可滚动，最终
top应为：event.touches[0].clientY + window.scrollY - dialogHeight / 2 - 还要检查
dialog是否超出视口边界，做简单约束：Math.max(16, Math.min(window.innerWidth - dialogWidth - 16, left))
实际项目里，这点最容易被忽略——用户一滚动，dialog 就飞到屏幕外去了。
