title: How to launch existing HTML content in a Bootstrap Modal dynamically, without having modal html for each link?
body: <p>I've read a few articles on loading remote content into modals or dynamic content, and have read the #531 issue <a href="https://github.com/twitter/bootstrap/issues/531" rel="nofollow noreferrer">https://github.com/twitter/bootstrap/issues/531</a> but can't quite find what I want, perhaps because I'm thinking about the problem in the wrong way.</p>
  
  <p>I have a list of content, each item showing a different product and some details about it.  I want to be able to click a 'view details' link for each product, and have the same content populate in a modal, but will use CSS to display some very small additional information (my question could be how to retrieve different content dynamically, but I think that given how little extra data I need, it's not worth the request).</p>
  
  <p>The HTML for a list item:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="span4 product"&gt;
          &lt;div class="inner"&gt;
              &lt;img src="xxxxx" alt="Product xxxxx" /&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;Product Type:&lt;/label&gt;
                  &lt;span class="field"&gt;Really cool product&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- Small amount of hidden additional information --&gt;
              &lt;div class="control-group hide"&gt;
                  &lt;label class="control-label"&gt;Product ID:&lt;/label&gt;
                  &lt;span class="field"&gt;123456&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="details" data-toggle="modal" href="#product-details"&gt;View details&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>1 Bootstrap Modal HTML:</p>
  
  <pre><code>&lt;div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-body"&gt;
         &lt;!-- Product Detail in here dynamically --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When you click the 'details' link, I want the 'inner' content to show in a modal.  There's two issues here:</p>
  
  <ol>
  <li>There are many items in this list (I've just shown 1), and I want each 'details' link to show the details of <em>that</em> product in the modal.</li>
  <li>I don't want to have loads of additional static modal html code as the target for each item, I just want 1 modal, but the content different depending on which 'details' link is clicked.</li>
  </ol>
  
  <p>I assume I'll need the one modal in the html, as shown in <a href="https://stackoverflow.com/questions/14045515/how-can-i-reuse-one-bootstrap-modal-div">this question about remote modal dialogues</a>.</p>
  
  <p>It's just how I change the content of it that I'm not sure about.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've found a solution of sorts (but can't answer my own question for a few hours).</p>
  
  <pre><code>$('.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();
  });
  </code></pre>
  
  <p>It clones the 'inner' div of the 'product' and appends it to the static modal container when the 'details', then launches the modal when the link is clicked.</p>
  
  <p>The second part removes that clone if you exit the modal.</p>