26

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に適用する方法がわかりません。何か助けはありますか？

ありがとう

4

3 に答える 3

38

非表示の状態でページにモーダルをプリロードする場合のコードは次のとおりです

<%= 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が適切に配置されます

于 2013-03-01T07:49:28.887 に答える
18

dataRailsに属性を追加するためのより良い方法があります。同じ結果を得るには、このようなことを行うことができます。

<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>
于 2014-04-21T20:24:39.510 に答える
-2

上記のベンチウォーマーの回答には構文エラーがあります。

代わりにこれを試してください：

$(".a-unique-class").html('<%= j render "posts/form" %>')
于 2013-12-25T07:53:54.387 に答える