by MT Shahzad on March 11th, 2008, 5:54 pm
The following code shows an example of overlay layer in css.
- Code: Select all
<html>
<head>
<title>Overlay Layer</title>
<style type="text/css">
<!--
.darkBackgroundLayer {
position: absolute;
lef : 0px;
top : 0px;
z-index: 2;
width: 100%;
height: 100%;
background-color: #000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.alertholder
{
text-align:center;
width:100%;
left:0px;
position:absolute;
top:30px;
z-index: 3;
}
.alert
{
background-color:#C9E0E6;
width:410px;
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:bold;
padding:8px;
color:#282828;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
-->
</style>
</head>
<body>
<!-- Alert Area -->
<div class="darkBackgroundLayer" id="darkBackgroundLayer"></div>
<div class="alertholder" id="alertholder">
<div class="alert">
Your chosen product has been added to your Shopping Basket<br /><br />Please click the Basket Link at the top of the page to view your basket and proceed your order<br><br>
<input type="button" value=" OK " onclick='document.getElementById("darkBackgroundLayer").style.display="none";document.getElementById("alertholder").style.display="none"'/>
</div>
</div>
<!-- End of Alert Area -->
<div>
<table border="1" cellpadding="100" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center">This is demo text</td>
</tr>
</table>
</div>
</body>
</html>