Overlay Layer

This section contains css codes and other related material.

Overlay Layer

Postby 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>
MT Shahzad
Web/Software Developer
http://mts.sw3solutions.com
User avatar
MT Shahzad
Site Admin
 
Posts: 300
Joined: February 29th, 2008, 8:11 am
Location: Muridke, Pakistan

Return to CSS - Cascading Style Sheet

Who is online

Users browsing this forum: No registered users and 0 guests