This is a demo layer which can be dynamically shown or hidden as per requirement. The layer may also contain one or many form elements. The layer is above all the contents because its z-index is set to a high value 99. However a layer can not hide form elements below it, irrespective of its z-index. (except for Netscape 6.x, where it is possible to have z-index for windowed elements/form elements).

A Text Input :
A Select Box :
A Button :
Hide This Box

Showing & Hiding Layers Dynamically

I have written this small article with a working demo because I have seen this question appearing again and again in various JavaScript and DHTML news groups. The code snippet given here shows and hides a <div> (layer) containing text and form elements programmatically. The code given here is compatible with IE 4+, Netscape 4.x and Netscape 6.x. It can be modified very easily to build pop up menus as well.
The layer (or div) given here as a demo contains few form elements, and has a high z-index (specifies which component should stay on top), hence it stays on of all the contents.
The code here is separated in two parts, one part contains bare minimum CSS, and the other part contains the JavaScript code needed for showing and hiding the div. See Demo.

CSS Part

Class of the div is demo, which is specified in the style tag as below. Color specifies the color of the text that is used inside the div, background-color is used to specify background color of the div in IE and Netscape 6, whereas layer-background-color is used for Netscape 4.x. The position is absolute, and specifies absolute position of the div on screen, z-index is set to 99 to ensure that this layer stays on top. Rest of the attributes are self explanatory. In the demo div used here, few more attributes have been used but they are used solely for cosmetic purpose.

        /* This must be in <head> and </head> part of the HTML. */

<style type="text/css">
<!--
.demo  {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
        position:absolute; top:100px; left:100px; width:480px; height:280px;
        z-index:99;  visibility:hidden;}
-->
</style>

JavaScript Code

Given below is the function which will show and hide the div. It take two arguments; szDivID - the div (recognized by its ID) that needs to be shown or hidden as a string argument. The other argument is iState, where 0 indicates "hide" (hidden) and 1 indicates "show" (visible). The function gets the required div according to the browser properties, and sets its visibility as specified by by iState.

       /* This must also be in <head> and </head> part of the HTML. */

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>

The Div & Its Contents

You can have the div anywhere in the body of your HTML document, assign it the class you have declared in the stylesheet, and some ID. You'll need to pass this ID to the toggleBox() function with desired visibility ( 0 => hide and 1 => show). You can put almost anything that you want inside the div that needs to be shown and hidden programmatically. You'll just need to adjust its height and width accordingly

     <!-- Put it anywhere in the <body> and </body> part of the HTML -->

<div ID="demodiv" class="demo">
   Put text, tables or any other HTML contents here, as you would put in
   any other HTML page.
   .....
   ..... and more.
</div>
                          <!-- To Show The DIV -->

<input type="button" onClick="toggleBox('demodiv',1);" value="Show Div">

                          <!-- To Hide The DIV -->

<input type="button" onClick="toggleBox('demodiv',0);" value="Hide Div">

Quite simple, isn't it? You can (of course) show and hide it whenever you want, and can replace those buttons by links, events or whatever....
One thing you must remember though, a div or layer *can not* hide the form elements (aka windowed elements) lying underneath it, irrespective of its z-index (however, Netscape 6.x supports z-index for these elements, so you can do it there). Otherwise, to do this, you must hide the elements lying underneath it and then show the div.

Another Solution

There is another shorter, smarter, c style way of doing the same thing. You can replace the JavaScript code given above with this code, this one doesn't count much on readability though! Happy coding and debugging ;)).

       /* This must also be in <head> and </head> part of the HTML. */

<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
   var obj = document.layers ? document.layers[szDivID] :
   document.getElementById ?  document.getElementById(szDivID).style :
   document.all[szDivID].style;
   obj.visibility = document.layers ? (iState ? "show" : "hide") :
   (iState ? "visible" : "hidden");
}
// -->
</script>

Author: Manish Hatwalne