问个关于lightbox的问题

当我点击一个按钮的时候，就会弹出覆盖层，遮盖整个页面，我的做法就是onclick点击的时候createElement一个div，设置一些属性覆盖整个页面，但有个问题就是，当我点击弹出覆盖层，如果我鼠标不在任何地方再按多一下的时候，不停的按空格键的话，会不停地创建覆盖层的，也就是说点击弹出的覆盖层的时候 底层的那个按钮仍处在按下的状态，所以不停地按空格键就会不停地进行onclick事件，就算我显示高亮层，仍然是这样所以想问下，有什么好的办法可以点击一次后，虽然按钮仍处在按下的状态，但不停按空格键的时候不会进行onclick事件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>2</title>
</head>
<script>
var $ = function(id){
return document.getElementById(id) ? document.getElementById(id) : {};
};


var base = function(){
var createDiv = function(div, divStyle){
var divBox = document.createElement(div);
divBox.id = "boxId";
for(key in divStyle){divBox.style[key] = divStyle[key]};
return divBox;
};

var insertDiv = function(div){
document.body.insertBefore(div, document.body.childNodes[0]);
};

return{
createDiv:createDiv,
insertDiv:insertDiv,
};
};


function cover(){
var box = new base(), divStyle = {
position:"fixed",
zIndex:1000,
left:0,
top:0,
width: "100%",
height:"100%",
background:"rgb(0, 0, 0)",
opacity:0.5,
display:"block",
};

$("bottomId").addEventListener('click', function(){
var coverDiv = box.createDiv('div', divStyle);
box.insertDiv(coverDiv);
$("closeId").style.visibility = "visible";
});





};

window.addEventListener('load', cover);
</script>

<style>
.siteLift{ width:100px; height:200px; background:yellow;}
</style>

<body style="height:3000px">

<div id="id" class="siteLift">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<input type="button" id="bottomId" value="click"/>
<!--<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>-->

<div id="closeId" style="position:absolute; z-index:2000; width:100px; height:100px; background:red; visibility:hidden">
<input type="button" value="click"/>
</div>


<!--<div id="tId" style="position:absolute; width:30px; height:18px; background:red; display:none">

</div>-->
</body>
</html>