Lightbox funktioniert nicht richtig

<p><style type="text/css">#makeItDark
{
position:absolute; top:0px; right:0px; left:0px; bottom:0px;
background-color:#000000;




/* For IE 5-7 */
filter: alpha(opacity=80);




/* For IE 8 */
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=80)";




/* For Safari >= 1.0 */
-khtml-opacity: 0.8;




/* For FireFox */
-moz-opacity: 0.8;




/* For all actual Browser with CSS 3*/
opacity: 0.8;




display:none;
}




#LightBox
{
position:relative;
}
</style></p>
<script type="text/javascript">
function LightBox()
{
var yposition = (window.innerHeight - 480) / 2;




if(document.getElementById('makeItDark').style.display == 'block')
{
document.getElementById('makeItDark').style.display = 'none';
document.getElementById('LightBox').style.display = 'none';
}
else
{
document.getElementById('makeItDark').style.display = 'block';
document.getElementById('LightBox').style.display = 'block';
document.getElementById('LightBox').style.top = yposition + 'px';
}
}
</script>
<p><input type="button" value="Tastatur" onclick="LightBox();" name="lightbut" /></p>
<div id="makeItDark">
<div id="LightBox"><img src="http://img.webme.com/pic/h/habbcointk/oil.png" alt="" /> <a href="javascript:history.go()"><img src="http://www.habbox.com/images/calvin/archive/images/icons/delete_betaclient.gif" alt="" /></a></div>
</div>
<p><input type="button" value="Umschalttasten" onclick="LightBox();" name="lightbut" /></p>
<div id="makeItDark">
<div id="LightBox"><img src="http://img.webme.com/pic/h/habbcointk/wfdsf.png" alt="" /> <a href="javascript:history.go()"><img src="http://www.habbox.com/images/calvin/archive/images/icons/delete_betaclient.gif" alt="" /></a></div>
</div>