为什么关闭按钮没有出来啊

<style>

body{

background-color: #f0f0f0;

}

#loginLayer{

position:absolute;

left: 240px;

top: 80px;

width: 200px;

height: 200px;

z-index: 2;

border:1px solid #ccc;

background-color: #fff;

text-align: center;

}

#maskLayer{

position:absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #000;

opacity:0.3;

}

#loginClose{

position:absolute;

left: 200px;

top: 0;

width: 30px;

height: 30px;

z-index: 3;

border:1px solid #ccc;

background-color: #ccc;

text-align: center;

}

</style>

<button id="loginBtn">登录</button>

//创建节点的函数

function createLoginLayer(){  //登录窗口节点函数

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

loginLayer.id = 'loginLayer';

loginLayer.innerHTML = '登录窗口';

loginLayer.style.display = 'none';

document.body.appendChild(loginLayer);

return loginLayer;

}

function createMaskLayer(){ //弹出层的节点函数

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

maskLayer.id = 'maskLayer';

maskLayer.style.display = 'none';

document.body.appendChild(maskLayer);

return maskLayer;

}

function createLoginClose(){

var loginClose = document.createElement('span');

loginClose.id = loginClose;

loginLayer.innerHTML = '×';

loginClose.style.display='none';

document.body.appendChild(loginClose);

return loginClose;

}

//创建单例模式的函数

function getSingleton(fn){//fn节点函数

var instance = null;  //保证函数的单一性

return function () { //返回一个函数 作为返回值

return instance || (instance = fn())  //2二选一的或运算 instance存在 就返回一个null,不存在就返回instance=fn()函数

};

}

var createSingletonLoginLayer = getSingleton(createLoginLayer);

var createSingletonMaskLayer = getSingleton(createMaskLayer);

var createSingletonloginClose = getSingleton(createLoginClose);

document.getElementById('loginBtn').onclick = function (){

var loginLayer = createSingletonLoginLayer();

var maskLayer = createSingletonMaskLayer();

var loginClose = createSingletonLoginLayer();

loginLayer.style.display = 'block';

maskLayer.style.display = 'block';

loginClose.style.display='block';

};