DHTML Popup Window Code

Welcome to TakeTwo Apps: DHTML Window w/ Auto Center

The days of pop-ups are more or less gone, but you can still get the same effect by using DHTML. This code example will display an auto-centering DHTML window on whatever page you load it. To download this code click here.

For a demo of this script click here. Be sure to scroll the page to check out the auto-center feature.

Use the below embed code to add this script to your site or blog!

<html>
<head>

<!--
	Published at: www.TakeTwoApps.com

Enter your window content below, between the comments
-->

<script>
var delay = "2"; // How long before window opens (in seconds)

var winw = "550"; var winh = "400";var repeat = "1"; 
var ie=(document.all);
var ns=(document.layers);
var ns6=(document.getElementById && !ie);
var calculate=ns? "" : "px"
function loadElement(){
if(!ns && !ie && !ns6) return;
if(ie) popup=eval('document.all.elementDiv.style');
else if(ns) popup=eval('document.layers["elementDiv"]');
else if(ns6) popup=eval('document.getElementById("elementDiv").style');
if (ie||ns6) popup.visibility="visible";
else popup.visibility ="show";
displayElement()
}
function displayElement(){
var agent=navigator.userAgent.toLowerCase();
if (ie){
	documentWidth = (centerElement().offsetWidth)/2+centerElement().scrollLeft-(winw/2);
	documentHeight = (centerElement().offsetHeight)/2+centerElement().scrollTop-(winh/2);
}
else if (ns){
	documentWidth=window.innerWidth/2+window.pageXOffset-(winw/2);
	documentHeight=window.innerHeight/2+window.pageYOffset-(winh/2);
}
else if (ns6){
	documentWidth=self.innerWidth/2+window.pageXOffset-(winw/2);
	documentHeight=self.innerHeight/2+window.pageYOffset-(winh/2);
}
popup.left = documentWidth+calculate;
popup.top = documentHeight+calculate;
setTimeout("displayElement()",100);
}
function centerElement(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function closeElement(){
	if (ie||ns6) { popup.display="none"; } 
	else { popup.visibility ="hide"; }
        if (repeat == 1) { location.replace; }
}
</script>

</head>
<body onLoad="setTimeout('loadElement()',delay*1000)" bgcolor="orange">

<script>document.write('<table cellSpacing="0" cellPadding="0" border="0" class="bg" width='+winw+' height='+winh+' id="elementDiv" style="visibility:hidden; position:absolute; top:0; left:0; border-color:black; background: url(\'bg.png\');">');
</script><tr><td align=center><center><div style="position:relative; top:-20; left:242" title="Click here to close this window"><font face=arial size=4><b><span onclick="closeElement()" style="cursor:pointer"">X</span></b></font></div><div style="float:center;  white-space:pre-line; background-color:#ffffff; width:440; height:300;position:relative; top:-10;">

<center><img src="http://www.taketwoapps.com/images/logo.jpg" border=0>
<br>
<font face=arial size=3>You can also launch this window via a link like so:</font>
<br><br><font size=2><code>
<a href="javascript:void(0)" onClick="setTimeout('loadElement()',delay*0)"> click here</a>
</code></font>

</div></center></td></tr></table></div>

</body>
</html>

NOTICE: You will need the background image that comes with the download (above) in order for the code to work right.

Subscribe to the TakeTwo newsletter!

RSS Feeds

Subscribe to TakeTwo via FeedBurner!

DHTML Popup Window Code

Copyright 2013 - | Contact Me