如何在Bootstrap Modal中动态地启动现有HTML内容，而不是每个链接都有模态html？

Question

我读过几篇有关将远程内容加载到模态或动态内容中的文章，并且已阅读＃531问题https://github.com/twitter/bootstrap/issues/531，但无法完全找到我想要的内容，也许是因为我正在以错误的方式思考问题。

我有一个内容列表，每个项目显示不同的产品和一些细节。我希望能够点击每个产品的“查看详细信息”链接，并以相同的内容填充模式，但会使用CSS来显示一些非常小的附加信息（我的问题可能是如何动态检索不同的内容，但我认为，鉴于我需要多少额外数据，这是不值得的要求）。

的列表项的HTML：

<ul> 
    <li class="span4 product"> 
     <div class="inner"> 
      <img src="xxxxx" alt="Product xxxxx" /> 
      <div class="control-group"> 
       <label class="control-label">Product Type:</label> 
       <span class="field">Really cool product</span> 
      </div> 
      <!-- Small amount of hidden additional information --> 
      <div class="control-group hide"> 
       <label class="control-label">Product ID:</label> 
       <span class="field">123456</span> 
      </div> 
     </div> 
     <a class="details" data-toggle="modal" href="#product-details">View details</a> 
    </li> 
</ul> 

1引导HTML模式：

<div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <!-- Product Detail in here dynamically --> 
    </div> 
</div> 

当您单击 '详细信息' 链接，我想要的 '内部' 内容的显示模态。这里有两个问题：

1. 有此列表中（我刚刚1所示）很多项目，我想每个“详细信息”链接，显示的的细节产品的模式。
2. 我不想为每个项目添加额外的静态模态HTML代码作为目标，我只想要1个模式，但内容根据点击的“详细信息”链接而不同。

我假设我需要html中的一个模态，如this question about remote modal dialogues所示。

这只是我如何改变它的内容，我不知道。

编辑

我发现了各种各样的解决方案（但不能回答我的问题了几个小时）。

$('.product a.details').click(function(){ 
    $(this).parent('.inner').clone().appendTo('#device-modal .modal-body'); 
    $('#product-details').modal(); 
}); 

$('#product-details').on('hidden', function(){ 
    $('#product-details .inner').remove(); 
}); 

它克隆“内部”格“产品”，并追加到静态模式容纳当“细节”，然后启动该模式的链接被点击的时候。

第二部分删除该克隆，如果您退出该模式。

Answer 1

我目前使用这个作为我的解决方案。 删除html中的标签，因为它实际上并不指向内容，并将点击功能设置为列表项本身。

$('.product').click(function(){ 
    $(this).find('.inner').clone().appendTo('#device-modal .modal-body'); 
    $('#product-details .modal-body .control-group.hide').show(); 
    $('#product-details').modal(); 
}); 

$('#product-details').on('hidden', function(){ 
    $('#product-details .inner').remove(); 
}); 

它克隆的“内” DIV“产品”的，它在用户点击“详情”链接时附加到静态模式容纳。然后显示隐藏的div，并启动模式。

第二部分删除该克隆，如果您退出该模式。

然后我有一些特定的CSS样式来定位模式中的内容，因此它有不同的外观。您当然可以将display：block添加到模式中的隐藏div中，而不是使用jQuery来显示它们。

我不确定的一件事是，是否应该用jQuery创建实际的模式div（＃product-details），因为它是html中的空格，否则在语义上不正确。