Jquery 如何在引导模式下动态启动现有HTML内容，而不必为每个链接创建模式HTML？

我读过几篇关于将远程内容加载到modals或动态内容中的文章，也读过#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>

它克隆“产品”的“内部”div，并在“详细信息”时将其附加到静态模式容器中，然后在单击链接时启动模式

---

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

我目前正在使用此作为解决方案。 删除html中的标记，因为它实际上并不指向内容，并将click函数设置为列表项本身

$('.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（#在我的例子中是产品详细信息），因为它在html中是一个空div，否则在语义上似乎不正确。

如果要使用jQuery插入模式基html，请参阅

$('.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();
});

$('.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();
});