Jasinski Technical Wiki

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

PoweredBy

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.

Image

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

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.