Twitter Bootstrap Modal is dark?

Question

All of my bootstrap code is working except the modal. The Modal shows, but the entire screen is dark. That is, the modal seems to be "behind" the gray.

  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="assets/js/bootstrap.js"></script>

  <a href="#myModal" data-toggle="modal">Login</a>

  <div id="myModal" class="modal hide fade in" aria-hidden="true">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">X</button>
           <h3 id="myModalLabel">Log in</h3>
       </div>
       <div class="modal-body">
         <p>
            <form class="modal-form" id="loginform" >
              <input type="text" name="username" placeholder="login" id="username">
              <input type="text" name="password" placeholder="password" id="userpassword">
             </form>
          </p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-success">Login</button>
        </div>
   </div>

Answer 1

It looks like you need to add this to the script right before the < /head >

<script type="text/javascript">
 $(function () { 
    $("#myModal").modal({show:false});
});  
</script>