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

Question

我正在尝试在 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，有什么帮助吗？

谢谢

Answer 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到位

Answer 2

data在 Rails 中添加属性有一种更漂亮的方法。你可以做这样的事情来获得相同的结果。

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

Answer 3

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

试试这个：

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