Popup Form with HTML, CSS, Java Script

Popup Form with HTML, CSS, Java Script
=============================


#lightbox{
    visibility:hidden;
    position:absolute;
    background:blue;
    border:2px solid #3c3c3c;
    color:white;
    z-index:200;
    width: 400px;
    height:300px;
    padding:40px;
}


.dimmer{
    background: #000;
    position: absolute;
    opacity: .5;
    top: 0;
    z-index:50;
}
​
​


Java Script
===========


var opener = document.getElementById("opener");


opener.onclick = function(){
    
    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");
    
    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';
    
    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }
        
    document.body.appendChild(dimmer);
    
    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/6 - 20 + 'px';
    lightbox.style.left = window.innerWidth/6 - 20 + 'px';
    return false;
}​




HTML 
====
<div id="lightbox">
 <form id='contactus' action='' method='post' accept-charset='UTF-8'>


    <div class='container'>
        <label for='name' >Your Full Name*: </label><br/>
        <input type='text' name='name' id='name' value='' maxlength="50" /><br/>
        
    </div>
    <div class='container'>
    <label for='email' >Email Address*:</label><br/>
        <input type='text' name='email' id='email' value='' maxlength="50" /><br/>
        
    </div>
    <div class='container'>
        <label for='message' >Message:</label><br/>
        
        <textarea rows="10" cols="50" name='message' id='message'></textarea>
    </div>
     <div class='container'>
        <input type='submit' name='Submit' value='Submit' />
    </div>
    </form>
   
</div>
<a href="#" id="opener">Click me</a>​




User for testing for HTML/CSS/JS
http://jsfiddle.net/rxGmk/43/