title: Twitter Bootstrap Modal - Grey background but no window
body: <p>I'm having a bit of an odd problem with Twitter Bootstrap and the non-JS examples of modal, what happens is that the modal background appears (greys) but the window does not.</p>
  
  <p>I've found if I remove the "hide" class from the modal windows div, it will load but not correctly.</p>
  
  <p>The Fiddle is here: <a href="http://jsfiddle.net/2VbUG/1/" rel="noreferrer">http://jsfiddle.net/2VbUG/1/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content="John Moss - Stolen Bikes UK"&gt;
      &lt;title&gt;Title&lt;/title&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;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"&gt;
  
      &lt;!-- Custom styles for this template --&gt;
      &lt;link href="assets/css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="assets/js/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="assets/js/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-bottom"&gt;
        &lt;div class="container"&gt;
          &lt;div class="col-lg-12 sign"&gt;
                &lt;a href="#myModal" role="button" class="btn btn-lg btn-danger" data-toggle="modal"&gt;Sign!&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="myModal" 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;×&lt;/button&gt;
              &lt;h3 id="myModalLabel"&gt;Sign This Petition!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p&gt;Fields for the signatures here, take some from the facebook API&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;Sign Now!&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code has come from this tutorial on Bootstraps website <a href="http://getbootstrap.com/2.3.2/javascript.html#modals" rel="noreferrer">http://getbootstrap.com/2.3.2/javascript.html#modals</a></p>