利用遮罩层做登录页面

<head>

<body>
<input type="button" value="登录" id="login-btn" /> //添加登录按钮

<body>

    document.getElementById('login-btn').onclick = function() {
   var b_width = document.body.clientWidth;            //获取整个页面的宽度
    var b_height = document.documentElement.clientHeight;     //获取整个页面的高度
    var left = b_width / 2 - 150 + 'px';
   var top = b_height / 2 - 50+ 'px';                    //使登录框居中

var mask = document.createElement('div');

mask.style.height = b_height + 'px'; //使遮罩层高度能够覆盖整个页面

mask.id = 'mask';

document.body.appendChild(mask);

    var pop_login = document.createElement('div');
   pop_login.style.left = left;
    pop_login.style.top = top;
    pop_login.id = 'pop-login';                           //使登录框能够居中显示
    pop_login.innerHTML =
                                  '<form action="#" method="post">' +
                                  '<input type="text" name="uid" placeholder="请输入用户名" />' +
                                  '<input type="password" name="pwd" />' +
                                  '<input type="submit" value="提交" />' +
                                  '</form>' +
                                 '<div id="close-pop">X</div>';                   //添加登录框
    document.body.appendChild(pop_login);
   document.getElementById('close-pop').onclick = function(){
                  document.body.removeChild(mask);
                  document.body.removeChild(pop_login);                         //给x添加点击事件，移除登录框和遮罩层
    }

    mask.onclick = function() {
    document.body.removeChild(mask);
   document.body.removeChild(pop_login);                                //给遮罩层添加点击事件，移除登录框和遮罩层
     }
}