Modal Dialogs - JavaScript

This article was adapted from here.

Overview¶

Although modal dialogs can't be created in JavaScript (at least not one that will work in all browsers), here is a work-around. When the Click Me button is clicked, the "dialog" is displayed and the "background" partially obscured until the OK button is clicked.

Sample Implementation¶

All files — the JavaScript, the CSS, the overlay.PNG, and the HTML file — are expected to be in the same directory.
When the Click Me button is clicked, the dialog appears.
The sm JavaScript function has the following parameters
- p1 = ID of the DIV for the "dialog"
- p2 = "dialog" width (pixels)
- p3 = "dialog" height (pixels)

<html>
<head>
    <!-- The JavaScript and CSS files are expected to be in the same directory as the HTML file. -->
    <script type="text/javascript" src="modaldbox.js"></script>
    <link rel="stylesheet" href="modaldbox.css" type="text/css" />
</head>
<body>

    <!-- The HTML for the "dialog" -->
    <div id="box" class="dialog">
        <div style="text-align:center"><span id="txt">Press OK to continue.</span>
        <br />
        <button onclick="hm('box');">OK</button></div>
    </div> 

    <!-- The "Click Me" button triggers the dialog. -->
    <input type='button' value='Click Me (absolute)' onclick="sm('box', 200, 50);" /> 
    <input type='button' value='Click Me (percent)' onclick="smpct('box', 90, 90);" />   
    
</body>
</html>

Source Code¶

JavaScript¶

Save the following text as modaldbox.js.

// Modal Dialog Box
// copyright 8th July 2006 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;}

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 smpct(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 = '0px'; 
    obol.style.left = '0px'; 
    obol.style.display = b;
    //obol.style.border = 'solid 1px red';
    obol.style.verticalalign = 'middle';
    obol.style.marginleft = 'auto';
    obol.style.marginright = 'auto';
    var obbx = $('mbox');
    var leftPos = pageWidth() * (100 - wd) / 200;
    obbx.style.width = wd + '%'; 
    obbx.style.height = wd + '%';
    obbx.style.left = leftPos + 'px';
    obbx.style.marginright = 'auto';
    //obbx.style.border = 'solid 2px #ff00ff';
    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;

CSS (Cascading Style Sheet)¶

Save the following text 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");
}

Overlay Image¶

Save the following image as overlay.png