jquery - How to launch existing HTML content in a Bootstrap Modal dynamically, without having modal html for each link? -

i've read few articles on loading remote content modals or dynamic content, , have read #531 issue https://github.com/twitter/bootstrap/issues/531 can't quite find want, perhaps because i'm thinking problem in wrong way.

i have list of content, each item showing different product , details it. want able click 'view details' link each product, , have same content populate in modal, use css display small additional information (my question how retrieve different content dynamically, think given how little data need, it's not worth request).

the html list item:

<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 modal 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> 

when click 'details' link, want 'inner' content show in modal. there's 2 issues here:

1. there many items in list (i've shown 1), , want each 'details' link show details of that product in modal.
2. i don't want have loads of additional static modal html code target each item, want 1 modal, content different depending on 'details' link clicked.

i assume i'll need 1 modal in html, shown in this question remote modal dialogues.

it's how change content of i'm not sure about.

edit

i've found solution of sorts (but can't answer own question few hours).

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

it clones 'inner' div of 'product' , appends static modal container when 'details', launches modal when link clicked.

the second part removes clone if exit modal.

i'm using solution. remove tag in html, it's not pointing content , set click function list item itself.

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

it clones 'inner' div of 'product' , appends static modal container when 'details' link clicked. shows divs hidden, , launches modal.

the second part removes clone if exit modal.

i have specific css styles target content in modal, has different look. of course add display:block hidden divs in modal instead of using jquery show them.

one thing i'm not sure of, whether actual modal div (#product-details in case) should created jquery, because empty div in html otherwise seems semantically incorrect.