Javascript pure HTML Dialog Box

It is a very common scenario to make a dimmed effect in web when a javascript popup is opened. Lots of people wonder how those being made. Some people tile with a transparent png to the background while others use div with certain opacity to fill up the entire space. I choice is with divs as they are purely htmls, and you can easily create div dynamically and also remove them from dom.

To do this, First we need a semi – transparent div to cover the entire work area :

var width = document.documentElement.offsetWidth + document.documentElement.scrollLeft;

var height = document.documentElement.offsetHeight + document.documentElement.scrollHeight;

var centerX,centerY;

if(document.documentElement && document.documentElement.clientHeight) // NON IE

{

centerX = document.documentElement.offsetWidth / 2;

centerY = document.documentElement.offsetHeight / 2;

}

else if( document.body ) //IE

{

centerX = document.body.clientWidth / 2;

centerY = document.body.clientHeight / 2;

}

var layer = document.createElement('div');

layer.style.zIndex = 2;

layer.id = 'backgroundlayer';

layer.style.position = 'absolute'; // Required to place layer in background

layer.style.top = '0px';

layer.style.left = '0px';

layer.style.height = document.documentElement.scrollHeight + 'px';

layer.style.width = width + 'px';

layer.style.backgroundColor = 'black'; // Ideal for dim effect

layer.style.opacity = '.6'; // Works only in Non IE browsers

layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)"); // IE little fix

document.body.appendChild(layer); // Append to DOM

document.body.style.overflow="hidden"; //To Hide extra scrollbar when dialog is visible.

Explanation :

In the above code we have created a div, set certain properties and append that to body. We need to have DXImageTransform to make opacity of a div in IE as style.opacity cannot work in IE. DX is directX transform, so if you don’t need your application to run over IE, you can remove this line, Otherwise this line will be ignored in Non-IE browsers. documentElement.scrollHeight gives you the actually height of the browser working area adding up the scrollPosition. Background of Div goes perfect with black, but you can change it to any other color according to your choice.

Another little fix for IE is use of document.body to find the center screen position which shows the popup.

Next we add a div in the middle of the page on top of the semi-transparent layer.

var div = document.createElement('div');

div.style.zIndex = 3; // It should be more than background DIV

div.id = 'popupbox';

div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';

div.style.top = '200px';

div.style.left = (width / 2) - 200+ 'px'; // Half its width

div.style.height = '50px';

div.style.width = '400px';

div.style.backgroundColor = 'white';

div.style.border = '2px solid silver';

div.style.padding = '20px';

document.body.appendChild(div);

Explanation :

This is the actual dialog box which is placed over the semi – transparent div. For IE we need to place its position to absolute, otherwise to fixed. (IE always bugs me with non-standard properties, Oh god). Left position is set to its width/2 – 200 as actual width is 200. We also created a solid silver border to the popup.

And finally we put some text and a link that closes the popup when clicked:

var p = document.createElement('p');

p.innerHTML = 'Some text';

div.appendChild(p);

// Create a close link of popup

var a = document.createElement('a');

a.innerHTML = 'Close window';

a.href = 'javascript:void(0)';

a.onclick = function()

{

document.body.removeChild(document.getElementById(backgroundlayer));

document.body.removeChild(document.getElementById('popupbox'));

document.body.style.overflow="auto";

};

So its done, you can try out the live demo if you need as well. Online Demo