用原生 dialog 元素实现轻量无障碍分享弹窗，需调用 showModal()、支持 Esc/点击遮罩关闭、注入 UTM 参数与页面标题，微信环境降级为 fixed 弹层，并优先检测 navigator.share() 兼容性后降级。
点击按钮就弹出分享面板，别用 modal 框架硬套
原生 HTML + 少量 JS 就能实现轻量、无障碍友好的分享弹窗，不需要引入 bootstrap 或 ant-design 这类整套 UI 库。核心是：用 dialog 元素（现代浏览器支持良好），配合 showModal() 控制显隐，再加一层语义化标记和键盘支持。
常见错误是直接用 div + display: none + 手动管理焦点，结果按 Esc 关不掉、Tab 键跳出弹窗、屏幕阅读器读不出“这是分享面板”。
-
dialog默认有inert行为（模态时自动禁用背景交互），不用自己写pointer-events: none - 必须手动调用
dialogEl.showModal()，不能只靠open属性——否则无法触发keydown监听和焦点捕获 - 关闭按钮需绑定
dialogEl.close()，且要监听Escape和点击 backdrop（dialog::backdrop）
分享链接要带 UTM 和当前页面标题，不是简单复制 window.location.href
用户点微信或微博图标后，生成的链接如果只是裸 URL，运营就完全没法归因。得在拼接时注入基础 UTM 参数，并把页面标题作为分享文案的一部分（尤其对微信内置浏览器很重要）。
注意：不同平台对链接长度和编码要求不同，encodeURIComponent 必须用在每一段动态内容上，而不是整个 URL 字符串。
立即学习“前端免费学习笔记（深入）”；
- 微信分享建议用
https://weixin.qq.com/q/xxx短链服务（需后端配合），前端可先 fallback 到https://share.weixin.qq.com/跳转页 - 微博分享地址是
https://service.weibo.com/share/share.php?title=xxx&url=xxx，title会截断，建议控制在 50 字以内 - 复制到剪贴板推荐用
navigator.clipboard.writeText()，但需 HTTPS 环境，降级方案是document.execCommand('copy')（已废弃但仍有兼容性）
微信内点击分享按钮没反应？检查 WebView 的 JS 上下文限制
微信内置浏览器（X5 内核）对 dialog 支持不完整，部分安卓机型会静默失败；iOS 微信则完全不支持 dialog 的 showModal()。这时候不能死守一个方案，得检测环境并降级。
判断是否在微信中：ua.includes('MicroMessenger')；判断是否支持 dialog：'showModal' in HTMLDialogElement.prototype。
- 微信内优先使用全屏
fixed定位的div弹层，避免用transform动画（X5 渲染异常） - 微信分享必须调用
WeixinJSBridge（仅限公众号网页），普通 H5 页面只能引导用户长按识别二维码或点击右上角菜单 - 不要在微信里尝试调用
navigator.share()—— 它在微信 WebView 中始终返回NotSupportedError
navigator.share() 是最简分享路径，但兼容性很具体
这个 API 真的只要三行代码就能唤起系统分享面板（含微信、QQ、钉钉等已安装 App），但它有硬性前提：HTTPS + 用户手势触发（如 click）+ 不在 iframe 中 + Android Chrome / iOS Safari 16.4+。
一旦不满足任一条件，就会抛出 AbortError 或直接静默失败，不会 fallback 到你的自定义弹窗——所以必须提前检测可用性，并组织好降级链。
- 检测方式：
if ('share' in navigator)，但更稳妥的是try { await navigator.share({ title, text, url }); } catch (e) { /* fallback */ } -
url字段必须是同源地址，跨域链接会被忽略（即使你传了也不会报错） - iOS Safari 对
text字段支持差，建议重点传title和url，文案放在页面标题或meta name="description"里
真正麻烦的不是怎么弹出来，而是弹出来之后用户点了微信图标，结果跳转失败、文案乱码、或者根本没唤起 App——这些都得靠组合判断和渐进式降级，而不是堆 CSS 动画或抄一段网上的“万能分享组件”。
