登陆框跳出的遮罩层效果实现

通过元素节点的创建、删除等操作实现的弹出框遮罩层效果

<style>
#oMask{
opacity: 0.7;
filter:alpha(opacity=70);
position: absolute;
z-index: 15;
background: #000;
left: 0;
top: 0;
}
#oLogin{
position: absolute;
width: 400px;
height: 200px;
border:3px solid red;
z-index: 26;
background: #fff;
}
#close{
position: absolute;
width: 12px;
height:12px;
top:5px;
right: 5px;
border-radius: 6px;
line-height: 12px;
text-align: center;
border: 1px solid #000;
}

</style>

<script>

function upspring(){
//获取滚动屏幕的大小
var sHeight=document.documentElement.scrollHeight||document.body.scrollHeight;
var sWidth=document.documentElement.scrollWidth||document.body.scrollWidth;
//获取可视区域
var cHeight=document.documentElement.clientHeight||document.body.clientHeight;
var cWidth=document.documentElement.clientWidth||document.body.clientWidth;
// console.log(cWidth)

//创建遮罩层
var oMask=document.createElement('div')
oMask.id='oMask'
//设置遮罩层的尺寸
oMask.style.height=sHeight+'px'
oMask.style.width=sWidth+'px'
//将遮罩层添加到页面
document.body.appendChild(oMask)
//创建登录框
var oLogin=document.createElement('oLogin')
oLogin.id='oLogin'
oLogin.innerHTML="<label>用户名</lable><input tyle='text'><br/><label>密码</label><input type='text'> <div id='close'>x</div>"
document.body.appendChild(oLogin)
oLogin.style.left=(cWidth-oLogin.offsetWidth)/2+'px';
oLogin.style.top=(cHeight-oLogin.offsetHeight)/2+'px';
// alert(oLogin.top)
var close=document.getElementById('close');
oMask.onclick=close.onclick=function(){ //可以这样多个绑定
document.body.removeChild(oMask) //不要加引号
document.body.removeChild(oLogin)
}
}

</script>