Create a Modal Window (DIV Element) with Javascript on HTML

Concept of creating a modal window in html is follows

• Create div element with higher zindex with less opacity for masking the body of HTML.
• Created masking div element should be of same size as of total height and width of body.
• Modal window (DIV element) can be then created with zindex higher than masking div.

For IE6 select element over absolute div problem, iframe of same size as of masking div is created and placed in between masking div and body element.

Javascript function to create a modal window by masking body in HTML

View Demo

var maskpanel=function()
{
    this.divobj;
    this.show=function()
    {
      if(!document.getElementById("xdivmasking"))
      {
          var divEle=document.createElement('div');
          divEle.setAttribute("id","xdivmasking");
          document.body.appendChild(divEle);
          var divSty=document.getElementById("xdivmasking").style;
          divSty.position="absolute"; divSty.top="0px"; divSty.left="0px";
          divSty.zIndex="46"; divSty.opacity=".50";divSty.backgroundColor="#000";
          divSty.filter="alpha(opacity=50)";

          var divFram=document.createElement('iframe');
          divFram.setAttribute("id","xmaskframe");
          document.body.appendChild(divFram);
          divSty=document.getElementById("xmaskframe").style;
          divSty.position="absolute"; divSty.top="0px"; divSty.left="0px"; 
          divSty.zIndex="45";divSty.border="none";divSty.filter="alpha(opacity=0)";
       }

       this.divobj=document.getElementById("xdivmasking");
       this.waitifrm=document.getElementById("xmaskframe");
       
       var dsh=document.documentElement.scrollHeight;
       var dch=document.documentElement.clientHeight;
       var dsw=document.documentElement.scrollWidth;
       var dcw=document.documentElement.clientWidth;
       
       var bdh=(dsh>dch)?dsh:dch;
       var bdw=(dsw>dcw)?dsw:dcw;

       this.waitifrm.style.height=this.divobj.style.height=bdh+'px';
       this.waitifrm.style.width=this.divobj.style.width=bdw+'px';  
       this.waitifrm.style.display=this.divobj.style.display="block";
    };
    this.hide=function()
    {
        this.waitifrm.style.display=this.divobj.style.display="none";
    };
}

"maskpanel" function to be placed between the "script" in body of HTML.

"maskpanel" function can be used as

	divmask=new maskpanel();
	divmask.show();

After using maskpanel can be closed as

	divmask.hide();

View Demo of "maskpanel" Javascript function to create a modal window by masking body in HTML.