最稳妥的方式是用data-title传弹窗标题，html中全小写连字符、js中驼峰读取dataset.title；dialog需手动将dataset.title赋值给其内部h3元素，且必须在showmodal()前完成。
data-*属性怎么传弹窗标题到dialog或自定义modal
直接用data-title最稳妥，但必须注意命名规则和读取方式——浏览器会把data-title转成dataset.title，而data-modal-title会变成dataset.modalTitle。别写data-modal_title或data-2024-title，前者映射失败，后者语法非法。
常见错误是按钮上写了data-title="用户详情"，JS里却用btn.dataset.Title（首字母大写）或btn.getAttribute('title')（读的是原生title提示框）。正确写法只有一种：btn.dataset.title。
- HTML中必须全小写+连字符：
<button data-title="订单#1001">查看</button> - JS中一律驼峰读取：
const title = btn.dataset.title（不是dataset.Title或dataset['title']） - 如果标题含空格、引号或换行，直接写进HTML没问题，
dataset会原样返回字符串，无需额外转义 - 避免用
data-name传标题——它和表单name语义冲突，某些框架会自动劫持该属性
dialog标签里怎么动态设标题而不硬编码
<dialog></dialog>本身不解析data-属性，标题得靠JS手动填。不能只写<dialog data-title="xxx"><h3></h3></dialog>就完事——data-title只是挂载在dialog节点上，<h3></h3>内容还是空的。
正确流程是：点击按钮 → 读取按钮的dataset.title → 找到dialog里的<h3></h3>或<header></header> → textContent赋值。关键点在于，dialog必须已存在于DOM中（不能每次点击都innerHTML = '...'重建），否则焦点、动画、可访问性都会出问题。
- 推荐结构：
<dialog id="detail-dialog"><header><h3></h3></header><div class="body"></div></dialog> - JS里：
dialog.querySelector('h3').textContent = btn.dataset.title - 如果标题要支持HTML（比如加
<em></em>），改用innerHTML，但必须确保内容可信，否则有XSS风险 - 别在
showModal()之后再设标题——视觉会闪一下；先更新内容，再调用showModal()
Bootstrap Popover或UIkit Modal怎么用data-title
Bootstrap 5 的 popover 不识别data-title作为标题源，默认用title属性。如果你写了data-title="xxx"但没配title="yyy"，它会显示空标题或 fallback 到alt。UIkit 同理，data-uk-modal不解析data-title，得靠 JS 手动注入。
想统一用data-title驱动所有弹窗，就得绕过框架默认逻辑，自己初始化。比如 Bootstrap：先禁用自动初始化，再用new bootstrap.Popover(trigger, { title: trigger.dataset.title })显式传参。
- Bootstrap 5 示例：
new bootstrap.Popover(btn, { title: btn.dataset.title, content: btn.dataset.content }) - UIkit 示例：
UIkit.modal('#my-modal').$el.querySelector('h3').textContent = btn.dataset.title - 不要混用：
data-bs-title是无效属性，Bootstrap 只认title或 JS 配置项 - 如果用了
data-bs-toggle="popover"自动初始化，那就必须用title属性，data-title纯属摆设
为什么弹窗标题偶尔显示undefined
八成是因为读错了 dataset 键名，或者按钮没正确绑定事件。比如按钮是动态生成的（表格行内操作），但事件监听器没委托，导致event.target不是按钮而是内部的<i></i>图标——这时event.target.dataset.title就是undefined。
另一个高频原因是属性名拼错：data-titile（少个l）、data-title-zh（框架没处理后缀）、或服务端模板渲染时变量为空，输出了data-title=""——此时dataset.title是空字符串，不是undefined，但显示出来就是空白。
- 调试时先打印
console.log(btn.outerHTML)，确认属性确实存在且拼写正确 - 用
btn.hasAttribute('data-title')判断是否存在，比直接读dataset.title更可靠 - 设置默认值：
const title = btn.dataset.title || '详情'，避免空白标题 - React/Vue 中注意：JSX里写
data-title={item.title}会被框架转成data-title，但若item.title是null，最终 DOM 里可能根本没有这个属性
真正容易被忽略的是：data-* 属性值永远是字符串，哪怕你写data-title={123}，读出来也是"123"。如果后续要基于标题做逻辑判断（比如if (title === '编辑')），得确保前后端约定好格式，别一边传"编辑"一边传"edit"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
