title: bootstrap modal just shows darkened screen (no modal)
body: <p>I have <a href="http://chessresearcher.com/test-02.html" rel="nofollow">http://chessresearcher.com/test-02.html</a> which should load <a href="http://chessresearcher.com/hello.html" rel="nofollow">http://chessresearcher.com/hello.html</a> as a modal, but it doesn't display it! What am I doing wrong? I have kept the code to bare minimum. The code source is <a href="http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&amp;file=modal-with-remote-url" rel="nofollow">http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&amp;file=modal-with-remote-url</a> which works.</p>
  
  <p><a href="http://chessresearcher.com/test-02.html" rel="nofollow">http://chessresearcher.com/test-02.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Example of Twitter Bootstrap Modals with Remote URL&lt;/title&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;
  
   &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
   &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $('#button_id').click(function(){
      $('#myModal').modal('show')
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .bs-example{
          margin: 20px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="bs-example"&gt;
      &lt;!-- Button HTML (to Trigger Modal) --&gt;
      &lt;a href="hello.html" role="button" id="button_id" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal"&gt;Launch Demo Modal&lt;/a&gt;
  
      &lt;!-- Modal HTML --&gt;
      &lt;div id="myModal" class="modal hide fade"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
              &lt;h3&gt;Confirmation&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;!-- Content will be loaded here from a remote source  --&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;  
  </code></pre>
  
  <p>and: <a href="http://chessresearcher.com/hello.html" rel="nofollow">http://chessresearcher.com/hello.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;title&gt;untitled&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;p&gt;Hello, World!&lt;/p&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>