Modal Dialog Box

Part 2 : Obtain the Script

To be able to add your own "modal dialogs" to your web page the first thing you need to do is to get the JavaScript that handles the modal display. Copy the following code and save it as modaldbox.js.


// Modal Dialog Box
// copyright 8th July 2006, 16th April 2011 by Stephen Chapman
// http://javascript.about.com/
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;}function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;}function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}function $(x){return document.getElementById(x);}function scrollFix(){var obol=$('ol');obol.style.top=posTop()+'px';obol.style.left=posLeft()+'px'}function sizeFix(){var obol=$('ol');obol.style.height=pageHeight()+'px';obol.style.width=pageWidth()+'px';}function kp(e){ky=e?e.which:event.keyCode;if(ky==88||ky==120)hm();return false}function inf(h){tag=document.getElementsByTagName('select');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h;tag=document.getElementsByTagName('iframe');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h;tag=document.getElementsByTagName('object');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h;tag=document.getElementsByTagName('input');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h;tag=document.getElementsByTagName('textarea');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility=h;if ('hidden' === h) {tag=$('mbox').getElementsByTagName('input');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility='visible';tag=$('mbox').getElementsByTagName('textarea');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility='visible';tag=$('mbox').getElementsByTagName('select');for(i=tag.length-1;i>=0;i--)tag[i].style.visibility='visible';}}function sm(obl, wd, ht){var h='hidden';var b='block';var p='px';var obol=$('ol'); var obbxd = $('mbd');obbxd.innerHTML = $(obl).innerHTML;obol.style.height=pageHeight()+p;obol.style.width=pageWidth()+p;obol.style.top=posTop()+p;obol.style.left=posLeft()+p;obol.style.display=b;var tp=posTop()+((pageHeight()-ht)/2)-12;var lt=posLeft()+((pageWidth()-wd)/2)-12;var obbx=$('mbox');obbx.style.top=(tp<0?0:tp)+p;obbx.style.left=(lt<0?0:lt)+p;obbx.style.width=wd+p;obbx.style.height=ht+p;inf(h);obbx.style.display=b;return false;}function hm(){var v='visible';var n='none';$('ol').style.display=n;$('mbox').style.display=n;inf(v);document.onkeypress=''}function initmb(){var ab='absolute';var n='none';var obody=document.getElementsByTagName('body')[0];var frag=document.createDocumentFragment();var obol=document.createElement('div');obol.setAttribute('id','ol');obol.style.display=n;obol.style.position=ab;obol.style.top=0;obol.style.left=0;obol.style.zIndex=998;obol.style.width='100%';frag.appendChild(obol);var obbx=document.createElement('div');obbx.setAttribute('id','mbox');obbx.style.display=n;obbx.style.position=ab;obbx.style.zIndex=999;var obl=document.createElement('span');obbx.appendChild(obl);var obbxd=document.createElement('div');obbxd.setAttribute('id','mbd');obl.appendChild(obbxd);frag.insertBefore(obbx,obol.nextSibling);obody.insertBefore(frag,obody.firstChild);
window.onscroll = scrollFix; window.onresize = sizeFix;}
window.onload = initmb;


Next copy the following stylesheet commands and save them as modaldbox.css.



                    #mbox{background-color:#eee; padding:8px; border:2px outset #666;}
#mbm{font-family:sans-serif;font-weight:bold;float:right;padding-bottom:5px;}
#ol{background-image: url(overlay.png);}
.dialog {display:none}


* html #ol{background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");}

The third step is to save this image as overlay.png. While it doesn't necessarily look like a semi-transparent grey image displayed this way on the page this image will display that way when used with the script. Note that the references to this image are within the stylesheet code so if you put the image somewhere other than the same folder as the pages where you are going to use the script then you will need to change the stylesheet to reference the correct location for the image in both places where it is referenced. You can of course substitute your own semi-transparent png image if you want to use a different colour. The image needs to be defined as a semi-transparent png in order to give the appropriate effect as no other image format will allow the main content to show through. While Internet Explorer 5.5 and 6 do not correctly support transparent png files the last line in the stylesheet will apply an equivalent effect in those browsers.

The final step in setting things up to be able to add "modal dialogs" to your web pages is to add the following code into the head of each page where you want to apply the be able to add them.

<script type="text/javascript" src="modaldbox.js">
</script>
<link rel="stylesheet" href="modaldbox.css" type="text/css" />

That done now all that remains is to add the HTML andd JavaScript that is required to actuallyuse the script

Sample Page | Obtain the Script | Use the Script