title: Bootstrap dynamically load div into modal
body: <p>I am trying to load the html of hidden divs in the bootstrap modal based on the link or button you press using a variable like a class or something dynamic.</p>
  
  <p>The example Code i have setup but does not work and does not load the content in the modal is</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;ul&gt;
      &lt;li class="span4 device"&gt;
          &lt;div class="inner"&gt;        
              &lt;div class="details1 hide"&gt;
                  &lt;label class="details1 control-label2"&gt;Device Type&lt;/label&gt;
                  &lt;span class="details1 field2"&gt;Really cool device&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="details2 hide"&gt;
                  &lt;label class="details2 control-label2"&gt;Device ID&lt;/label&gt;
                  &lt;span class="details2 field2"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et &lt;b&gt;magnis dis parturient&lt;/b&gt; montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.&lt;/p&gt;
  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="details1" data-toggle="modal" href="#product-details"&gt;View details 1&lt;/a&gt;
          &lt;a class="details2" data-toggle="modal" href="#product-details"&gt;View details 2&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  var customModal = $('&lt;div class="custom-modal modal fade bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="modal-ru"&gt;&lt;div class="modal-dialog modal-sm"&gt;&lt;div class="modal-content"&gt;&lt;div class="modal-header"&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;&lt;h4 class="modal-title" id="myModalLabel"&gt;&lt;/h4&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
  
      var linkclass = $('a[data-toggle="modal"]').attr('class');
  
      $('a[data-toggle="modal"]').click(function(){    
          $('body').append(customModal);
  
          $('.custom-modal .modal-title').html( $(linkclass + '.control-label2').html() );
          $('.custom-modal .modal-body').html( $(linkclass + '.field2').html() );    
          $('.custom-modal .hide').show();
          $('.custom-modal').modal();
  
          $('.custom-modal').on('hidden', function(){
              console.log("hidden");
              $('.custom-modal').remove();
          });
      });
  </code></pre>
  
  <p>You can view it here <a href="http://jsfiddle.net/D2RLR/6454/" rel="nofollow">http://jsfiddle.net/D2RLR/6454/</a> </p>