js代码实现登录页面

本来是打算把这个弹出式的登录页面完成的，但中间有不少bug，只写出了一段可以弹出页面的js代码，弹出的页面插入不进去，只会显示空白，这个只能后面一点来弄了。

以下是代码：

function openNew(){
      //获取页面的高度和宽度
      var sWidth=document.body.scrollWidth;
      var sHeight=document.body.scrollHeight;
 
      //获取页面的可视区域高度和宽度
      var wWidth=document.documentElement.clientWidth;
      var wHeight=document.documentElement.clientHeight;
 
      var oMask=document.createElement("p");
      oMask.id="mask";
      oMask.style.height=sHeight+"px";
      oMask.style.width=sWidth+"px";
      document.body.appendChild(oMask);
      var oLogin=document.createElement("p");
      oLogin.id="login";
      oLogin.innerHTML="<p id="login1"> <h1>Login</h1> <form method="post"> <input type="text" required="required" placeholder="请输入邮箱" name="username"> <input type="password" required="required" placeholder="请输入密码" name="password"> <button class="but" type="submit">登录</button> </form> </p>";
      document.body.appendChild(oLogin);
 
      //获取登陆框的宽和高
      var dHeight=oLogin.offsetHeight;
      var dWidth=oLogin.offsetWidth;
      //设置登陆框的left和top
      oLogin.style.left=wWidth/2-dWidth/2+"px";
      oLogin.style.top=wHeight/2-dHeight/2+"px";
      //点击关闭按钮
      var oClose=document.getElementById("close");
 
      //点击登陆框以外的区域也可以关闭登陆框
      oClose.onclick=oMask.onclick=function(){
        document.body.removeChild(oLogin);
        document.body.removeChild(oMask);
      };
    };
 
    window.onload=function(){
      var oBtn=document.getElementById("btnLogin");
      //点击登录按钮
      oBtn.onclick=function(){
        openNew();
        return false;
      }
 
    }