6

我已经阅读了几篇关于将远程内容加载到模态或动态内容中的文章，并阅读了 #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 中的一个模式，如关于远程模式对话的问题所示。

这就是我如何更改我不确定的内容。

编辑

我找到了各种各样的解决方案（但几个小时都无法回答我自己的问题）。

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

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

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

4

1 回答 1

2

我目前正在使用它作为我的解决方案。删除 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 中的空 div，否则在语义上似乎不正确。

于 2013-05-13T09:58:42.343 回答