如何使用 link_to 添加引导模式，以便链接内容以模式打开？

Posted 2023-02-22

【中文标题】如何使用 link_to 添加引导模式，以便链接内容以模式打开？

【英文标题】：How to add bootstrap modal with link_to so the link content open in modal ?

【发布时间】：2013-02-15 15:28:06

【问题描述】：

我正在尝试在 rails 链接上使用引导模式 http://twitter.github.com/bootstrap/javascript.html#modals 在模式中打开该链接

<%= link_to page_path, target: '_blank' %>

但不知何故它不起作用。标准切换代码是 -

<a data-toggle="modal" href="#myModal" class="btn">Launch demo modal</a>

但我不确定如何将它应用到 rails 中的 link_to，有什么帮助吗？

谢谢

【问题讨论】：

我通过按以下顺序向我的 application.js 添加要求来完成这项工作：//= 需要 popper，//= 需要 turbolinks，//= 需要引导程序您可以在此处查看示例：@ 987654322@

【参考方案1】：

如果你想在隐藏状态的页面上预加载模式，下面是代码

<%= link_to "Open modal", "#my-modal", :class => "btn", "data-toggle" => "modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    Modal Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

如果你想通过 ajax 加载模式，那么你可以这样做

<%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "my-modal" %>
<div class="modal hide fade" id="my-modal" title="My modal">
  <div class="modal-header">
    <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
    <h3 id="myModalLabel">New Post</h3>
  </div>
  <div class="modal-body a-unique-class">
    New Post Body
  </div>
  <div class="modal-footer">
    <button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

在posts/new.js.erb 中你会包含

$(".a-unique-class").html('<%= j render "posts/_form" %>')

确保每个模态体都有一个唯一的 id 或类。

假设您想使用模态表单创建一个新帖子，控制器代码和_form.html.erb 就位

【讨论】：

感谢 benchwarmer，虽然没用。这是我的代码 "btn", "data-toggle" => "modal" %> 但它仍然在新标签页中打开页面

您想在同一页面上预加载模态框还是想通过 ajax 加载模态框的正文？

我知道这篇文章很旧，但只是在代码中进行了一个小的 sintax 更正： $(".a-unique-class").html(' ')

不应该是：<%= link_to "Open modal", new_post_path, :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "#my-modal" %> 这样数据目标是唯一的 id 吗？但是，此解决方案似乎不适用于 bootstrap3。您应该在此处的示例中使用 html 代码：getbootstrap.com/javascript/#modals

在posts/new.js.erb 中应该是$(".a-unique-class").html('<%= j render "form" %>')。然后一切都会工作:)。

【参考方案2】：

在 Rails 中添加data 属性有一个更漂亮的方法。您可以执行类似的操作来获得相同的结果。

<%= link_to 'Click Here', "#", data: toggle: "modal", target: "#modal" %>

【讨论】：

加载动作视图而不是整个页面的最佳方式是什么？此示例似乎加载了应用程序视图和 link_to 页面。如果我只想要 edit.html.erb 视图而不需要其他内容怎么办？谢谢！

我最近做了类似的事情，我的索引操作视图有几条记录。每条记录都有一个带有标签的关联模式。每个选项卡都呈现了大量数据。我没有用一堆可能永远不会在该视图上看到的数据污染浏览器，而是按需加载它。查看 Railscast 源代码，了解 Ryan 是如何做到的。您可以根据自己的喜好对其进行调整。将原本 500KB 的占用空间缩减到最初的 15KB。

Railscasts。 :) 这不是一个特定的插曲，而是实际的 Railscasts 站点。 github.com/ryanb/railscasts

【参考方案3】：

上面的 benchwarmer 回答中有语法错误。

试试这个：

$(".a-unique-class").html('<%= j render "posts/form" %>')

【讨论】：

这应该是理想的评论。这也只是已接受答案的一部分，因此您不应发布此类答案。您可以选择编辑答案（但这一切只有在获得一些声誉后才有可能）。阅读How to Answer