title: Bootstrap Modals misbehaving
body: <p>I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:</p>
  
  <p>The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only <code>class="modal"</code> the modal displays by default when the page loads and will not close. If I include <code>class="modal hide"</code> then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.</p>
  
  <p>I'm not making any big departures from the <a href="http://twitter.github.com/bootstrap/javascript.html#modals" rel="nofollow">modals sample code</a> on the Bootstrap site, any ideas what's going wrong?</p>
  
  <p>Here's the button that's supposed to launch the modal:</p>
  
  <pre><code>&lt;a class="btn" data-toggle="modal" href="#testmodal" &gt;About&lt;/a&gt;
  </code></pre>
  
  <p>And here's the modal itself:</p>
  
  <pre><code>    &lt;div class="modal hide fade in" id="testmodal"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
              &lt;h3&gt;Modal Header&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p&gt;body&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js</p>