下面是源代码,一个很完美的弹出层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="&nbsp";
      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>

解决方案 »

  1.   

    由于按钮的焦点没有失去,每次按回车,代表调用一个onclick,就会产生一个遮罩层,所以点多了,就产生了N个,我修改了下就可以<!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);
    if($("bg")) return ;
          bg=document.createElement("div");
      
          bg.setAttribute("id","bg");
          bg.innerHTML="&nbsp";
          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>