如何动态启动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 Bootstrap模态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中的一个模态,如关于远程模态对话的这个问题所示.

这就是我如何改变它的内容,我不确定.

编辑

我找到了各种解决方案(但几个小时内无法解答我自己的问题).

$('.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'的'inner'div并在'details'时将它附加到静态模态容器,然后在单击链接时启动模态.

如果退出模态,第二部分将删除该克隆.

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 来显示它们。

我不确定的一件事是，实际的模态 div（在我的例子中是#product-details）是否应该使用 jQuery 创建，因为它是 html 中的一个空 div，否则在语义上似乎不正确。