Saturday, June 30, 2012

Simple Light Box

by Unknown 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>LIGHTBOX EXAMPLE</title>
  <style>
  .black_overlay{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.8;
   opacity:.80;
   filter: alpha(opacity=80);
  }
  .white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index:1002;
   overflow: auto;
  }
 </style>
 </head>
 <body>
     
   
  <div id="light" class="white_content">
            <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
            <form name="LoginForm">
            <table align="center" cellpadding="5" cellspacing="5"><tbody>  
            <tr>
                <td align="center" class="Title" colspan="2">Login Form</td>
            </tr>  
            <tr>
                <td class="label">UserName:</td>
                <td align="center">      
                    <input name="LoginForm[username]" id="username" type="text" />
                </td>
            </tr>  
            <tr>
                <td class="label">Password:</td>
                <td align="center">        
                <input type="password" name="LoginForm[password]" id="password"   type="text" /></td>
            </tr>  
            <tr>
                <td></td>
                <td><input id="submit" type="button" value="Login" /></td>                      
            </tr>  
            </tbody></table>
            </form>
        </div>  
                    
  <div id="fade" class="black_overlay"></div>
                    
  

 </body>
</html>

0 comments:

Post a Comment