Question

我正在尝试将数据加载到模式弹出窗口中。

在我的Post模型中，我有一个标题和描述。

我希望标题出现在表格中，当点击模式时，里面会显示描述文字。

（下面是带有索引和帖子标题的表格的代码以及打开模态的链接。）

<% @posts.each_with_index do |post, index| %>
    <tr>
      <td><%= index + 1 %></td>
      <td><%= post.title %></td>
      <td>Link-to-display-modal-goes-here</td>
    </tr>
<% end %>

我有一个隐藏的div，我可以通过单击按钮使其显示/消失。我只是不知道如何填充div。

下面是我要加载帖子描述的div。

<div id="myModal" class="modal hide fade">
  post's description goes here.
</div>

非常感谢任何帮助。

Answer 1

使用调用您自己的自定义JavaScript方法的链接替换“link-to-display-modal-goes-here”。在此方法中，您可以在模态中设置所需的任何数据，然后显示它。

因此，当您生成视图时，请将当前链接替换为显示模式，如下所示：

<td><a href="#" onclick="javascript:openMyModal('<%= post.description %>')">Description</a></td>

然后你的javascript就像：

<script type="text/javascript">
  $(document).ready(function(){
    window.openMyModal = function (postDescription) {
      $('#myModal').text(postDescription);
      $('#myModal').modal('show');
      return false;
    }
  });
</script>

这只是一个例子，所以你必须调整它才能完全按照自己的意愿行事。但是，走这个方向对你有用。

Answer 2

您可以将源链接与点击处理程序相关联，而不是使用数据切换来打开模式。我更喜欢这样做，因为将内联放入csturts中，这样可以更好地分离html和脚本。所以你可以有一个链接

<a class="btn btn-modal" data-desc="description">title</a>

和脚本

<script type="text/javascript">
$(document).ready(function(){
  $('.btn-modal').click( function() {
    $('#myModal').find('#myModal-div').html($(this).data('desc'));
    $('#myModal').modal('show');
  });
});
</script>

Answer 3

如果您使用的是jQuery，可以使用以下调用填充div：

$('#my-modal-div').html('<span>Some HTML GOES HERE</span>')

在模态中加载数据

3 个答案: