title: Modal Window with HTML5 and CSS
body: <p>I am following a tutorial found <a href="http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/" rel="nofollow">here</a> and I can't seem to get it to show up. I am using a bootstrap enabled website so I am not sure if that is the problem. I've been at it for two hours and can't seem to get anywhere. My button that I want users to click on in order to bring up the popup looks like this: <code>&lt;a href="#openModal" class="btn btn-lg btn-primary"&gt;Contact Me&lt;/a&gt;</code> The framework for the popup looks like this:</p>
  
  <pre><code>&lt;div id="openModal" class="contactus"&gt;
      &lt;div&gt;
          &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
          &lt;h2&gt;Title&lt;/h2&gt;
          &lt;p&gt;Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS document looks like: </p>
  
  <pre><code>.contactus {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  }
  
  .contactus:target {
  opacity:1;
  pointer-events: auto;
  }
  
  .contactus &gt; div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
  }
  
  .close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  }
  
  .close:hover { background: #00d9ff; }
  </code></pre>
  
  <p>I have JavaScript enabled on my browser it if you click on it, you can't scroll up on the page unless you press "Esc" so I think it's puling up, you just can't see it. I was thinking it had something to do with <code>z-index: 99999;</code> but I don't know what that does exactly.</p>
  
  <p>Any ideas??</p>