jquery - リンクごとにモーダルhtmlを持たずに、ブートストラップモーダルで既存のHTMLコンテンツを動的に起動する方法は?

Question

リモートコンテンツをモーダルまたは動的コンテンツにロードすることに関するいくつかの記事を読んだことがあります。問題を間違った方法で考えているからです。

コンテンツのリストがあり、各アイテムは異なる製品とそれに関する詳細を示しています。各製品の「詳細を表示」リンクをクリックして、同じコンテンツをモーダルに入力できるようにしたいのですが、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>

「詳細」リンクをクリックすると、「内部」コンテンツがモーダルで表示されるようにします。ここには 2 つの問題があります。

1. このリストには多くの項目があり (1 つだけ示しました)、各「詳細」リンクでその製品の詳細をモーダルに表示したいと考えています。
2. 各アイテムのターゲットとして追加の静的モーダル HTML コードを大量に持ちたくありません。1 つのモーダルだけが必要ですが、クリックされた「詳細」リンクによって内容が異なります。

this question about remote modal dialogsに示されているように、html に 1 つのモーダルが必要になると思います。

よくわからないのは、その内容をどのように変更するかです。

編集

ある種の解決策を見つけました（ただし、数時間は自分の質問に答えることができません）。

$('.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 を複製し、「詳細」のときに静的モーダル コンテナーに追加し、リンクがクリックされたときにモーダルを起動します。

モーダルを終了すると、2 番目の部分でそのクローンが削除されます。