Here is html and javascript code to show a transparent area over current html page. Ideally a dark transparent overlay over html page using css javascipt and html

  
  
  

    Show Popup
    

    
    

        
Hello World This is  a test
        Close Popup
    




  <style type="text/css">
.overlay
{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;   
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

}
.popup
{
    position: absolute;
    top: 10%;
    left: 10%;
    margin-left: -50px;
    margin-top: -10px;
    width: 640px;
    height: 480px;
    display: none;
    background: white;   
    border:1px black;
}
</style>
  
  <script type="text/javascript">
      function showPopup() {
          document.getElementById("overlay").style.display = "block";
          document.getElementById("popup").style.display = "block";
      }
      function closePopup() {
          document.getElementById("overlay").style.display = "none";
          document.getElementById("popup").style.display = "none";
      }
    </script>

    <a href="#" onclick="javascript:showPopup();return false;">Show Popup</a>
    <div id="overlay" class="overlay">
    </div>
    <div id="popup" class="popup">
        <h1>Hello World This is  a test</h1>
        <a href="#" onclick="closePopup(); return false;">Close Popup</a>
    </div>