Navigation

	Home Page
	Index
	All Pages

Quick Search

Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Discuss (0) History

Modal Dialogs - JavaScript

RSS

Modified on Wed, Jan 19, 2011, 2:21 PM by Administrator Categorized as JavaScript, jQuery, and Angular

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

Jasinski Technical Wiki