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

布满荆棘的人生 2022-08-03 00:51 91阅读 0赞

今天上午的自己写了下遮罩层，和登陆界面的关闭，总之都是很简单的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";
        }

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