リンクごとにモーダル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つの問題があります。
2. 各アイテムのターゲットとして追加の静的モーダルHTMLコードを追加したくない場合は、1つのモーダルが必要ですが、どの「詳細」リンクがクリックされたかによって内容が異なります。

this question about remote modal dialoguesのように、htmlに1つのモーダルが必要です。

私はそれについて私が確信していない内容を変更するだけです。私はある種の解決策を発見しました（しかし、数時間のために自分の質問に答えることはできません）

EDIT

。

$('.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番目の部分はそのクローンを削除します。

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を表示し、モーダルを起動します。

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

次に、モーダルのコンテンツをターゲットとする特定のCSSスタイルを使用しているため、外観が異なります。もちろん、jQueryを使って表示するのではなく、モーダルの隠しdivにdisplay：blockを追加することもできます。

実際のモーダルdiv（私の場合は製品の詳細）をjQueryで作成する必要があるかどうかは、htmlの空のdivなので意味的に間違っているかどうかです。