Try this simple demo of a custom popup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
label + div {
margin-bottom : 1em; font : 700 16pt "Trebuchet MS", "Bernard MT Condensed", Verdana, Arial, sans-serif; }
-->
</style>
<script type="text/javascript">
<!--
var customPopup = function( w, h, elem ) {
elem = (( document.getElementById ) ? document.getElementById( elem ) : document.all[ elem ] );
var checked = true;
var posTop;
var posLeft;
try {
if ( document.body.scrollWidth ) {
posLeft = document.body.scrollWidth;
posTop = (( window.screen.availHeight ) ? screen.availHeight : document.body.scrollHeight );
}
} catch( error ) {
if ( window.scrollMaxY ) {
posLeft = window.scrollMaxX;
posTop = window.scrollMaxY;
} else {
check = false;
}
} if ( checked ) { // You can implement more style rules from here.
var divWidth = (( posLeft * w ) / 100 );
var divHeight = (( posTop * h ) / 100 );
elem.style.width = divWidth;
elem.style.height = divHeight;
elem.style.backgroundColor = "#eee";
elem.style.border = "2px solid #405060";
elem.style.position = "absolute";
elem.style.left = Math.ceil((( posLeft - divWidth ) / 2 )) + "px";
elem.style.top = Math.ceil((( posTop - divHeight ) / 2 )) + "px";
}
};
window.onload = function() {
customPopup( 40, 40, "main" );
}
// -->
</script>
</head>
<body>
<div id="main"><div style="padding : 1em; color : #405060; text-align : center"><h1 style="margin : 0 auto; padding : 0;">Custom Popup</h1></div></div>
</body>
</html>
