慕课网

换一种方式思考，半透明的遮罩层、关闭按钮、login模块不用js来添加，在DOM里写好 设置display:none,什么时候要显示js设置为block，也不会妨碍页面加载时获取它们的id
那就这样写：
var sheight=document.documentElement.scrollHeight;//获取页面高度
var swidth =document.documentElement.scrollWidth;//获取页面宽度

var wheight=document.documentElement.clientHeight;//获取可视区域的高度
var wwidth=document.documentElement.clientWidth;//获取可视区域的宽度

var obtn=document.getElementById('btnLogin');//抓取id为btnLogin的登陆按钮

obtn.onclick=function (){//点击登陆按钮时创建 1.遮罩层； 2.创建登陆框

var omask=document.createElement('p');//创建一个'遮罩层'p
omask.id='mask';//设定p的id为mask
omask.style.height=sheight+'px';//给遮罩层设定高度为页面高度
omask.style.width=swidth+'px';//给遮罩层的宽度设定为页面宽度
document.body.appendChild(omask);//把创建好的omask节点插入到页面中

var ologin=document.createElement('p');//创建一个'登陆框'p
ologin.id='login';//设定该p的id为login

ologin.innerHTML="<p class='loginCon'><p id='close'></p></p>";

document.body.appendChild(ologin);//将ologin节点插入到页面中
/*
 下面两行是给ologin做定位，使其永远在页面的中心位置
 top为 (可视高度-ologin高度)/2
 width为 (可视宽度-ologin宽度)/2
 */
ologin.style.top=(wheight-ologin.offsetHeight)/2+'px';
ologin.style.left=(wwidth-ologin.offsetWidth)/2+'px';
closeThis(omask,ologin);

}
function closeThis(node,log){

var oclose=document.getElementById('close');//获取id为close的关闭按钮。注：该按钮在之前点击登陆按钮建立的登陆框上
oclose.onclick=function (){//当点击关闭按钮时，执行1.删除遮罩层；2.删除登陆框
    document.body.removeChild(node);
    document.body.removeChild(log);
}

}

因为压根找不到close这个btn啊。
你得在渲染完这个overlay之后才能找到close这个btn 再执行。因为是跑完代码，你的closebtn还没写进去呢