遮罩层特效，登录界面的应用

今天上午的自己写了下遮罩层，和登陆界面的关闭，总之都是很简单的JS代码，我因为思路问题，所以敲了好长时间，最后再群友的帮助下完成了今天的任务，下午可能还会更新一章，具体什么，还没想好
先写一下写遮罩层的思路吧
首先遮罩层嘛，经过群友的意见，有2种写法，一种是CSS设置宽高，一种是JS设置宽高，总的来说，css比较简单
这两个版本代码差距很少，几乎没大有，不过还是列出来看看

//最核心的代码其实就是遮罩层的代码，
#gray{
    z-index: 999;
    display: none;
    background: #ccc;
    width: 100%;
    height:100%;
    position: fixed;
    /*position: absolute;*/
    top: 0px;
    left: 0px;

}//一开始我用的是absolute，所以导致我做不出效果，如果是fixed的话，无论你滚动条如何滚都不会有事，而absolute就会出现问题
//这是之后的JS代码，
window.onload=function(){
    var login=document.getElementById("login");
    var close=document.getElementById("login_ctn_colse");
    var lcontain=document.getElementById("login_ctn");
    var gray=document.getElementById("gray")
    login.onclick=function(){
        lcontain.style.display="block";
        gray.style.display="block"
    }
    close.onclick=function(){
        lcontain.style.display="none";
        gray.style.display="none";
    }

下一种是以JS为主要的代码

#gray{
    z-index: 999;
    display: none;
    background: #ccc;
    position: fixed;
    top: 0px;
    left: 0px;

}
//JS代码多了获取宽高的部分
window.onload=function(){
    var login=document.getElementById("login");
    var close=document.getElementById("login_ctn_colse");
    var lcontain=document.getElementById("login_ctn");
    var gray=document.getElementById("gray")
    var sWidth=document.body.scrollWidth;
    var sHeight=document.body.scrollHeight;
    login.onclick=function(){
        lcontain.style.display="block";
        gray.style.height=sHeight+"px";
        gray.style.width=sWidth+"px";
        gray.style.display="block"
    }
    close.onclick=function(){
        lcontain.style.display="none";
        gray.style.display="none";
    }

总体来说还是第一种方法比较好用！！！但是第二种可以封装起来，也到是不错的选择吧！！