我想要一个链接来打开一个模式,显示单击的对象(word.title),显示在每个循环中。现在它会打开模式,但随后会为循环中的每个项目再次显示它。
<h1>Glossary of words</h1>
<p>Pagination at 25</p>
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Definition</th>
<th>Usage</th>
<th>Word Type</th>
</tr>
</thead>
<tbody>
<% @words.each do |word| %>
<tr>
<th scope="row">
<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">
<%= word.title %>
</a>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<%= word.title %>
</div>
</div>
</div>
</th>
<td><%= word.title %></td>
<td><%= word.definition %></td>
<td><%= word.word_type %></td>
</tr>
<% end %>
</tbody>
</table>
// Word Modal
$('.bs-example-modal-sm').modal()
为了使您的链接调用正确的模式,您需要分配id
to eachmodals
。并使用data-target
属性通过传递来调用模态id of modal
进去。
你的代码可能看起来像这样。
<a href="#" data-toggle="modal" data-target="#modal-<%= word.id %>">
<%= word.title %>
</a>
<div id="modal-<%= word.id %>" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<%= word.title %>
</div>
</div>
</div>
source: http://getbootstrap.com/javascript/#live-demo http://getbootstrap.com/javascript/#live-demo
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)