Ruby-on-rails 如何使用 link_to 添加 bootstrap modal 以便链接内容在 modal 中打开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15152486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add bootstrap modal with link_to so the link content open in modal ?
提问by iCyborg
I am trying to use bootstrap modal http://twitter.github.com/bootstrap/javascript.html#modalson a rails link to open that link in the modal
我正在尝试在 rails 链接上使用引导模式http://twitter.github.com/bootstrap/javascript.html#modals在模式中打开该链接
<%= link_to page_path, target: '_blank' %>
but somehow it is not working. The standard toggle code is -
但不知何故它不起作用。标准切换代码是 -
<a data-toggle="modal" href="#myModal" class="btn">Launch demo modal</a>
but I am not sure how to apply it to link_to in rails, any help ?
但我不确定如何将它应用于 rails 中的 link_to，有什么帮助吗？
Thanks
谢谢
回答by benchwarmer
Below is the code if you want to preload the modal on the page in hidden state
如果要在隐藏状态下在页面上预加载模态，请使用以下代码
<%= 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>
And if you want to load the modal through ajax then you can do something like this
如果你想通过 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>
In posts/new.js.erbyou would include
在posts/new.js.erb你会包括
$(".a-unique-class").html('<%= j render "posts/_form" %>')
Make sure that you have a uniqueid or class for every modal body.
确保每个模态体都有唯一的id 或类。
Assuming you want to create a new post using modal form, the controller code and _form.html.erbis in place
假设您想使用模态形式创建一个新帖子，控制器代码_form.html.erb就位
回答by kobaltz
There is a prettier way to add dataattributes in Rails. You can do something like this to get the same results.
data在 Rails 中有一种更漂亮的方法来添加属性。你可以做这样的事情来获得相同的结果。
<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>
回答by Madx
There is a syntax error in benchwarmer's answer above.
上面 benchwarmer 的回答中存在语法错误。
try this instead:
试试这个：
$(".a-unique-class").html('<%= j render "posts/form" %>')
