Simple Light Box

Simple Lightbox is a very simple and customizable lightbox that is easy to add to your website.


<!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>