title: javascript modal dialog
body: <p>I am very beginner to Javascript. Just trying to learn modal dialog but encounter some issues, the code is as below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Click here to show the overlay&lt;/title&gt;
  &lt;style&gt;
  #overlay {
       visibility: hidden;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       text-align:center;
       z-index: 200;
       background-image:url(maskBG.png);
  }
  
  #overlay div {
       width:300px;
       margin: 100px auto;
       background-color: #fff;
       border:1px solid #000;
       padding:15px;
       text-align:center;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  function overlay(){
  
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"&gt;
  
  &lt;p align="center"&gt;&lt;a href='#' onclick='overlay()'&gt;Click here to show the overlay&lt;/a&gt;&lt;/p&gt;
  
  &lt;p align="center"&gt;this is my text... this is my text... this is my text...&amp;nbsp;this 
  is my text... this is my text...&amp;nbsp;this is my text...this is my text... this 
  is my text... this is my text... this is my text...&lt;/p&gt;
  
  
  &lt;p align="center"&gt;&lt;b&gt;this is my text... this is my text... this is my text...&amp;nbsp;this 
  is my text... t&lt;/b&gt;&lt;/p&gt;
  
  &lt;div id="overlay"&gt;
  &lt;div&gt;
  &lt;p&gt;Content you want the user to see goes here.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This is a very simple code. My question is why the layer one is not clickable after layer two popup? I will think as because layer two stay on top of layer one and has blocked layer one. But why I can click the "link" to trigger the function overlay()? The layer two's visibility is hidden but it still stay on top of layer one right? The function didn't even change the z-index. I can't figure it out, why.</p>
  
  <p>Another question is, now how am I able to dismiss the layer two and go back to layer one? Some simple code is appreciated.</p>
  
  <p>Thank for any help!</p>