在Modal中加载数据

我正试图将数据加载到模态弹出窗口中。在Modal中加载数据

在我的岗位型号我有一个标题和描述。

我想标题出现在一个表，点击出现与里面的描述文本的模式时。

（下面是用指数和这篇文章的标题和打开的模态的链接表中的代码。）

<% @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 id="myModal" class="modal hide fade"> 
    post's description goes here. 
</div>

任何帮助是非常赞赏。

来源

2012-03-04 moctopus

取代你的“链接到显示模式 - 云 - 这里”与调用自己的链接自定义JavaScript方法。在这种方法中，你可以在模态中设置你想要的任何数据，然后显示它。

所以，当你生成你的看法，替换当前的链接像这样的东西来显示模式：

<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>

这是只是一个例子，所以你必须调整它做你想要的。但是，走这个方向应该适合你。

来源

2012-03-05 03:53:29 csturtz

嘿，我刚刚醒来，并试图此。它完美的工作，非常感谢你的帮助。 – moctopus 2012-03-05 12:35:34

没问题，很高兴我能够帮助:) – csturtz 2012-03-05 13:23:41

如果你使用jQuery，您可以填充div像这样的电话：

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

来源

2012-03-04 22:27:52 nicholaides

而不是使用数据切换打开模态，您可以将源链接关联到点击处理程序。我更喜欢这样做，因为它将内联按照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>

来源

2012-03-05 09:12:15

在Modal中加载数据

回答

相关问题