将 Turbo confirm 替换为原生对话框

Source: Dev.to

Rails 在使用 turbo‑links 时，会为破坏性操作内置一个确认对话框。你可能已经无数次使用过它：

默认的 turbo_confirm 使用浏览器原生的 confirm 对话框。它能工作，但你无法控制其外观或内容。

用原生对话框替换 turbo_confirm

下面是一种最小化的做法，能够让你完全掌控标记和样式。

1. 移除 turbo_confirm 属性

将原来的按钮替换为一个普通按钮，并触发 Stimulus‑style 动作：

2. 添加对话框标记

在按钮后面放置一个 <dialog> 元素：

<dialog closedby="any">
  <h4>真的要删除吗？</h4>

  <p>确定要删除帖子 "" 吗？此操作无法撤销。</p>

  <button type="button" data-action="dialog#close">取消</button>
  <%= button_to "Delete", post_path(@post), method: :delete, data: { turbo_confirm: false } %>
</dialog>

• closedby="any" 允许用户点击对话框外部或按 Esc 键来关闭对话框。
• 内部的 button_to 执行实际的删除操作。

3. 引入 Attractive.js

在布局中加入 Attractive.js（例如 app/views/layouts/application.html.erb）：

该库提供 dialog#openModal 动作，无需自定义 JavaScript。更多细节请参阅文档。

4. 为对话框添加样式

你可以随意为对话框设置样式。仓库中包含一个基础样式示例。想了解更高级的 CSS 技巧，请参考现代 CSS 相关文章。

何时使用哪种方案？

自定义对话框保持简洁——无需额外的 JavaScript——并且让你对用户体验拥有完整的控制。 ✨