<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title> Test</title>
<style type=”text/css”>
.opaqueLayer
{
display:none;
position:absolute;
top:0px;
left:0px;
opacity:0.6;
filter:alpha(opacity=60);
background-color: #000000;
z-Index:1000;
}
.questionLayer
{
position:absolute;
top:0px;
left:0px;
width:350px;
height:200px;
display:none;
z-Index:1001;
border:2px solid black;
background-color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding:10px;
}
</style>
<script type=”text/javascript”>
function getBrowserHeight() {
var intH = 0;
var intW = 0;
if(typeof window.innerWidth == ‘number’ ) {
intH = window.innerHeight;
intW = window.innerWidth;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
intH = document.documentElement.clientHeight;
intW = document.documentElement.clientWidth;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
intH = document.body.clientHeight;
intW = document.body.clientWidth;
}
return { width: parseInt(intW), height: parseInt(intH) };
}
function setLayerPosition() {
var shadow = document.getElementById(’shadow’);
var question = document.getElementById(‘question’);
var bws = getBrowserHeight();
shadow.style.width = bws.width + ‘px’;
shadow.style.height = bws.height + ‘px’;
question.style.left = parseInt((bws.width – 350) / 2)+ ‘px’;
question.style.top = parseInt((bws.height – 200) / 2)+ ‘px’;
shadow = null;
question = null;
}
function showLayer() {
setLayerPosition();
var shadow = document.getElementById(’shadow’);
var question = document.getElementById(‘question’);
shadow.style.display = ‘block’;
question.style.display = ‘block’;
shadow = null;
question = null;
}
function hideLayer() {
var shadow = document.getElementById(’shadow’);
var question = document.getElementById(‘question’);
shadow.style.display = ‘none’;
question.style.display = ‘none’;
shadow = null;
question = null;
}
window.onresize = setLayerPosition;
</script>
</head>
<body>
<div id=”shadow” class=”opaqueLayer”> </div>
<div id=”question” class=”questionLayer”>
<br />
<br />
<br />
We can put anything in here
<br />
<br />
<br />
<input type=”button” onclick=”hideLayer();” value=”Close” />
</div>
<h3>Modal Layer Test</h3>
<p>Click the image below to display the “modal” layer</p>
<img src=”http://www.google.co.in/intl/en_ALL/images/logo.gif” alt=”Test Image” onclick=”showLayer();” />
</body>
</html>
