title: bootstrap modal fades in, but the container remains empty
body: <p>I want to include a simple bootstrap modal. The code is minimal, but there seems to be something wrong.</p>
  
  <p>When I click the "Launch demo" button, the modal fades in, but the container that should hold the ".modal-header" ".modal-body" and ".modal-footer" is empty.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;     
      &lt;/head&gt;
      &lt;body&gt;               
          &lt;div class="container"&gt;  
              &lt;h2&gt;Example of creating Modals with Twitter Bootstrap&lt;/h2&gt;  
              &lt;div id="example" class="modal hide fade in" style="display: none; "&gt;  
                  &lt;div class="modal-header"&gt;  
                      &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;  
                      &lt;h3&gt;This is a Modal Heading&lt;/h3&gt;  
                  &lt;/div&gt;  
                  &lt;div class="modal-body"&gt;  
                      &lt;h4&gt;Text in a modal&lt;/h4&gt;  
                      &lt;p&gt;You can add some text here.&lt;/p&gt;                
                  &lt;/div&gt;  
                  &lt;div class="modal-footer"&gt;  
                      &lt;a href="#" class="btn btn-success"&gt;Call to action&lt;/a&gt;  
                      &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;  
                  &lt;/div&gt;  
              &lt;/div&gt;  
              &lt;p&gt;&lt;a data-toggle="modal" href="#example" class="btn btn-primary btn-large"&gt;Launch demo modal&lt;/a&gt;&lt;/p&gt;  
          &lt;/div&gt; 
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>