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.

| | More

Comments

Jon says:
Aug 03, 09
I like the simplicity of this - no special effects, just a mask and a content div.
mohan says:
Sep 02, 09
this is very good. Thanks.
mohan says:
Sep 02, 09
this is very good. Thanks.
perrucho says:
Sep 08, 09
The best I have seen! Congratulations!
johny says:
Sep 16, 09
It certainly looks very elegant. Out of curiosity I tested the code and I found that it works just fine even without calling the show() and hide() method on the javascript object. That is showing and hiding the "demodiv" div alone seems to works just as well. What did I miss? Thanks.
Gagan says:
Nov 12, 09
perfect solution to create model window I have seen ever before. Thanks a lot.
W says:
Jan 06, 10
Much the simplest example I've found, and works on IE6! Thanks.
Hieronymus P. Organthruster says:
Jan 15, 10
To echo comments above, this is by far and away the simplest and yet most complete example of a modal DIV - thank you for taking the time to write and to publish it. There are countless alternatives but 99% of these seem to require heavyweight, lazy boy Javascript libraries to achieve the same effect.
Riz says:
Apr 08, 10
Yes, really very good many thanks
juanitogan says:
Oct 27, 10
This is great but it needs a tweak for pages on IE that adjust in height through AJAX and such (new height can only be found through document.body.scrollHeight): var bodSW = document.body.scrollWidth; var bodSH = document.body.scrollHeight; var docSW = document.documentElement.scrollWidth; var docSH = document.documentElement.scrollHeight; var docCW = document.documentElement.clientWidth; var docCH = document.documentElement.clientHeight; var docSW = (docSW > bodSW) ? docSW : bodSW; var docSH = (docSH > bodSH) ? docSH : bodSH; var maskWidth = (docSW > docCW) ? docSW : docCW; var maskHeight = (docSH > docCH) ? docSH : docCH;
luiz says:
Oct 28, 10
The demo link not works, What mus be writed in html body portion?
Siddharth Macwan says:
May 31, 11
this was an awesome help.. I used this Mask panel to prohibit user communication with the menu page while loading other urls...Thanks a lot.
Ted Herrlich says:
Nov 19, 11
I was having a problem with nesting YUI2 modal dialog boxes. Your code appears to have solved it. I made the YUI dialogs not modal and created my own mask, then carefully showed and hide the mask appropriately. Interestingly enough I was also getting a 'script running slow, do you want to stop it?' pop-up in IE that also appeared to go away once I was no longer nesting YUI2 modals. Thanks!

Do you like this post?

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

Leave a reply

Comments

Related Posts

Categories

Tools

Recent Posts