title: How can I reuse one Bootstrap modal div?
body: <p>I'd like to be able to have a number of different links on a page reuse one modal div via Bootstrap's modal plugin:</p>
  
  <pre><code>&lt;h3&gt;This button shows a modal (&lt;code&gt;#utility&lt;/code&gt;) with text "Phasellus &lt;em&gt;tincidunt gravida&lt;/em&gt;..."&lt;/h3&gt;
  &lt;br /&gt;
  &lt;a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn"&gt;Modal 1&lt;/a&gt;&lt;br /&gt;
  &lt;h3&gt;This button should invoke the same modal (&lt;code&gt;#utility&lt;/code&gt;), but fill it with text "Phasellus &lt;em&gt;egestas est eu&lt;/em&gt;..."&lt;/h3&gt;
  &lt;br /&gt;
  &lt;a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn"&gt;Modal 2&lt;/a&gt;&lt;br /&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&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;h3 id="myModalLabel"&gt;Click outside modal to close it&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;One fine body…this is getting replaced with content that comes from passed-in href&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd expect that clicking on either link (which are styled as buttons) would invoke the modal and load the modal with the page (value of <code>href</code>) corresponding to the clicked button. Instead, the modal always loads with the content of the link you click first; the modal does not "refresh" with content that should be dictated by <code>href</code> of the "other" link.</p>
  
  <p>I think this is a Bootstrap bug, but I'm asking the question here in case I'm using it incorrectly.</p>
  
  <p>Please see <a href="http://jsfiddle.net/jhfrench/qv5u5/" rel="noreferrer">http://jsfiddle.net/jhfrench/qv5u5/</a> for a demonstration.</p>