title: Modal window javascript css overlay
body: <p>Right now I have to click the link to open a modal window. I don't know how to make this thing to loading without having to click the link. Can anyone please show me how to do this?
  Thank you!</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;script type="text/javascript"&gt;
  function overlay() {
          el = document.getElementById("overlay");
          el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  body {
       height:100%;
       margin:0;
       padding:0;
  }
  #overlay {
       visibility: hidden;
       position: absolute;
       left: 0px;
       top: 0px;
       width:100%;
       height:100%;
       text-align:center;
       z-index: 1000;
  
          background:black;
             /* Required for IE 5, 6, 7 */         /* ...or something to trigger hasLayout, like zoom: 1; */         width: 100%;           /* Theoretically for IE 8 &amp; 9 (more valid) */         /* ...but not required as filter works too */         /* should come BEFORE filter */         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";          /* This works in IE 8 &amp; 9 too */         /* ... but also 5, 6, 7 */         filter: alpha(opacity=90);          /* Older than Firefox 0.9 */         -moz-opacity:0.9;          /* Safari 1.x (pre WebKit!) */         -khtml-opacity: 0.9;          /* Modern!         /* Firefox 0.9+, Safari 2?, Chrome any?         /* Opera 9+, IE 9+ */         opacity: 0.9; 
  }
  #overlay div {
       width:300px;
       margin: 100px auto;
       background-color: #fff;
       border:1px solid #000;
       padding:15px;
       text-align:center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="overlay"&gt;
       &lt;div&gt;
            &lt;p&gt;Content you want the user to see goes here.&lt;/p&gt;
            Click here to [&lt;a href='#' onclick='overlay()'&gt;close&lt;/a&gt;]
       &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;&lt;a href='#' onclick='overlay()'&gt;Click here to show the overlay&lt;/a&gt;
  &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>