How to make a lightbox, with overlay for entire page(not just viewport)?

Click and wait for another page to open for the data to display, this is no more a trend, now in every
website we find light boxes.  Light Boxes are the small boxes or we can say windows which appears in the middle of the screen with the data and all, and there is a transparent overlay just below it covering rest of the page.  We get plugins for these lightboxes, but when I tried it myself with simple javascript and CSS, was unable to get a perfect one.  But now I got something perfect the following code is perfect for the light box, with the simplest and minimum code we can create such lightboxes.
     Following is the html code:

<div class="container">
<input type="button" onclick="showOverlay()" value="Click Here For LightBox"/>
</div>  
<div id="overlay"></div>
<div id="lightBox"><h1>Jaydharphics</h1>
<input type="button" onclick="hideOverlay()" value="Close This"/>
</div>

Description:
  Overlay DIv and lightBox Div are the two DIVs we require for the lightBox.  As the name suggests overlay is the one covering the entire page and the lightBox Div is the one popping up with the data.  The container DIV is the normal page. In that page I have created a button "Click Here for LightBox" this button will trigger the display of the light box  and there is another button in the light box which will unhide the lightbox.
Following is the javascript for the above actions:

<script type="text/javascript">
function showOverlay() {
document.getElementById('overlay').style.display='block';
document.getElementById('lightBox').style.display='block';
}

function hideOverlay() {
document.getElementById('overlay').style.display='none';
document.getElementById('lightBox').style.display='none';
}
</script>

The CSS of the overlay DIV and the lightBox Div was the biggest issue for the perfection of this lightBox.  Making a DIV hide and unhide was easy but positoning of the overlay and lightbox DIVs is pretty important.  Few things are very important for a lightbox, the lightbox should be in the middle of the page, no matter what is the size of the screen, it should be at the centre.  For that reason the following CSS is very important and perfect.

<style>
#overlay{height:100%; width:100%; position:fixed; background:#545454; opacity:0.5; top:0px; left:0px; display:none;}
#lightBox{position:fixed; top:50%; left:50%; width:400px; height:200px; margin-left:-200px; margin-top:-100px; border:4px solid #e4e4e4;  background:#fff; display:none;}
</style>

A very important thing in this CSS of lightBox are the width, height, margin-left and margin-top properties.  margin-left value(-200px) should be half of the value(400px) of width and margin-top value(-100px) should be half of the value(200px) of the height, and the values of margin-top and margin-left should be in negative. 
This will make your light box display in the centre of the screen.

Next is the CSS of the overlay DIV:
#overlay{height:100%; width:100%; position:fixed; background:#545454; opacity:0.5; top:0px; left:0px; display:none;}

Most of us definately have problem with this overlay. The CSS I used earlier was used to cover the viewport only, not the entire page.  But a simple change in the CSS fixed my problem. yes! fixed is the word which fixed my problem.  Most of us use position:absolute; for this, but position:fixed; is the solution.  This will cover your entire page and rest of the CSS I think is not tangent for you!
  Thank You Friend!

Share Your Solutions!