title: Bootstrap Modal popping up but has a "tinted" page and can't interact
body: <p>I am using bootstrap to set up a modal popup.  When a button is clicked, the modal dialog opens, but the entire page is slightly "tinted", and I can't interact with the modal (the page essentially freezes).  Do you know why this would be?  Here is the code:</p>
  
  <p>button:</p>
  
  <pre><code>&lt;a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;"&gt;Play my city&lt;/a&gt;
  </code></pre>
  
  <p>modal:</p>
  
  <pre><code>&lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
  
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Congratulations!&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;h4&gt;Text in a modal&lt;/h4&gt;
              &lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
  
              &lt;h4&gt;Popover in a modal&lt;/h4&gt;
              &lt;p&gt;This &lt;a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?"&gt;button&lt;/a&gt; should trigger a popover on click.&lt;/p&gt;
  
              &lt;h4&gt;Tooltips in a modal&lt;/h4&gt;
              &lt;p&gt;&lt;a href="#" class="tooltip-test" title="Tooltip"&gt;This link&lt;/a&gt; and &lt;a href="#" class="tooltip-test" title="Tooltip"&gt;that link&lt;/a&gt; should have tooltips on hover.&lt;/p&gt;
  
              &lt;hr&gt;
  
              &lt;h4&gt;Overflowing text to show optional scrollbar&lt;/h4&gt;
              &lt;p&gt;body&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Here are the included files:</p>
  
  <pre><code>&lt;link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css"&gt;
  &lt;link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css"&gt;
  &lt;link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"&gt;
  
  &lt;link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css"&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="http://crowdtest.dev:8888/assets/js/script.js"&gt;&lt;/script&gt;
  &lt;script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>EDIT:  Happens in all browsers tried (Chrome, Firefox, Safari)</p>