下面是源代码,一个很完美的弹出层demo,但是弹出尘后,按回车,背景层会出问题,具体原因不明,求救!!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj)
}
function showdiv(d,x,y){
div=$(d); bg=document.createElement("div");
bg.setAttribute("id","bg");
bg.innerHTML=" ";
bgstyle(bg);
document.body.appendChild(bg);
div.style.display="block";
div.style.top=x;
div.style.left=y;
// document.write(button.style.top+"px"+button.style.left+"px");
}
function bgstyle(bg){
bg.style.width=window.screen.availWidth+"px";
bg.style.height=window.screen.availHeight+"px";
bg.style.display="block";
bg.style.left="0px";
bg.style.top="0px";
bg.style.background="#000000";
bg.style.position="absolute";
bg.style.filter="alpha(opacity:30)";
bg.style.opacity="0.3";
bg.style.zIndex="10"
}
function hidiv(id){
div=$(id);
bg=$("bg");
div.style.display="none";
document.body.removeChild(bg);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="showdiv('show','100px','100px')" />
<div id="show" style="display:none;z-index:1001;position: absolute; width:400px;height:300px; background:#fff; overflow: auto;">
<input id="Submit1" type="submit" value="submit" onclick="hidiv('show')" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj)
}
function showdiv(d,x,y){
div=$(d); bg=document.createElement("div");
bg.setAttribute("id","bg");
bg.innerHTML=" ";
bgstyle(bg);
document.body.appendChild(bg);
div.style.display="block";
div.style.top=x;
div.style.left=y;
// document.write(button.style.top+"px"+button.style.left+"px");
}
function bgstyle(bg){
bg.style.width=window.screen.availWidth+"px";
bg.style.height=window.screen.availHeight+"px";
bg.style.display="block";
bg.style.left="0px";
bg.style.top="0px";
bg.style.background="#000000";
bg.style.position="absolute";
bg.style.filter="alpha(opacity:30)";
bg.style.opacity="0.3";
bg.style.zIndex="10"
}
function hidiv(id){
div=$(id);
bg=$("bg");
div.style.display="none";
document.body.removeChild(bg);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="showdiv('show','100px','100px')" />
<div id="show" style="display:none;z-index:1001;position: absolute; width:400px;height:300px; background:#fff; overflow: auto;">
<input id="Submit1" type="submit" value="submit" onclick="hidiv('show')" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj)
}
function showdiv(d,x,y){
div=$(d);
if($("bg")) return ;
bg=document.createElement("div");
bg.setAttribute("id","bg");
bg.innerHTML=" ";
bgstyle(bg);
document.body.appendChild(bg);
div.style.display="block";
div.style.top=x;
div.style.left=y;
// document.write(button.style.top+"px"+button.style.left+"px");
}
function bgstyle(bg){
bg.style.width=window.screen.availWidth+"px";
bg.style.height=window.screen.availHeight+"px";
bg.style.display="block";
bg.style.left="0px";
bg.style.top="0px";
bg.style.background="#000000";
bg.style.position="absolute";
bg.style.filter="alpha(opacity:30)";
bg.style.opacity="0.3";
bg.style.zIndex="10"
}
function hidiv(id){
div=$(id);
bg=$("bg");
div.style.display="none";
document.body.removeChild(bg);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="showdiv('show','100px','100px')" />
<div id="show" style="display:none;z-index:1001;position: absolute; width:400px;height:300px; background:#fff; overflow: auto;">
<input id="Submit1" type="submit" value="submit" onclick="hidiv('show')" />
</div>
</body>
</html>