登录页面（带遮罩层的） ---2017-04--5

注意事项：

1、遮罩层大小、登陆框大小都是随窗体变化而变化的。

2、onclick事件的定义。

3、js创建div,移除属性，以及将内容写入。

4、登录框中的用户名和密码均是用input写的，样式不够美观，升级版待更新。。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.mask{
100%;
/*height: 500px; 不能定义高,因为要跟随首页大小变化而变化*/
background-color: ghostwhite;
opacity: 0.5;
z-index: 998;
position: absolute;
top: 0px;
left: 0px;
}
.login{
400px;
height: 300px;
background-color: gainsboro;
position: fixed;
/*left: 200px; 通过js读取，不需要定义
top: 300px;*/
z-index:999;
}
.close-btn{
30px;
height:30px;
position:absolute;
top:10px;
right:10px;
background-color: gray;
text-align: center;
line-height: 30px;
}
.close-btn:hover{
cursor: pointer;}
#a1{
300px;
height: 450px;
position: absolute;
}
#inner{
250px;
height: 40px;
position: relative;

left: 60px;
text-align: center;
vertical-align: middle;
line-height: 40px;

}
.yonghuming{
position: relative;
margin-top: 50px;

}
</style>
</head>
<body>


<p onclick="showLogIn()" >登录</p> 


<div ;
}
</script>

下面代码和上面一样，方便以后copy：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .mask{
                width: 100%;
            /*height: 500px;               不能定义高,因为要跟随首页大小变化而变化*/
                background-color: ghostwhite;
                opacity: 0.5;
                z-index: 998;
                position: absolute;
                top: 0px;
                left: 0px;
            }
            .login{
                width: 400px;
                height: 300px;
                background-color: gainsboro;
                position: fixed;
                /*left: 200px;             通过js读取，不需要定义   
                top: 300px;*/
                z-index:999;
            }
            .close-btn{
                width:30px;
                height:30px;
                position:absolute;
                top:10px;
                right:10px;
                background-color: gray;
                text-align: center;
                line-height: 30px;
            }
            .close-btn:hover{
                cursor: pointer;}
                #a1{
                     300px;
                    height: 450px;
                    position: absolute;
                }
            #inner{
                 250px;
                height: 40px;
                position: relative;
                
                left: 60px;
                text-align: center;
                vertical-align: middle;
                line-height: 40px;
                
                
            }
            .yonghuming{
                position: relative;
                margin-top: 50px;
                
            }
        </style>
    </head>
    <body>
        <!--<input type="button" value="登录" onclick="showLogIn()" />-->  
        <!--目的是换用文字，不使用input作为按钮-->
        <p onclick="showLogIn()" >登录</p>          <!--给文字添加onclick事件-->
        
        <!--以下div为弹出框中的内容，要设置其display属性为none,因为只要它们在遮罩层中显示-->
        <div >
            <div id='inner' class='yonghuming'> 
            用户名：<input type="text" placeholder="用户名/手机号">
            </div>
            <div id='inner'class='password'>
                密码：&nbsp;&nbsp;<input type="password" placeholder="请输入密码">
            </div>
            <div id='inner'class='denglu' style="background-color:gray;margin-top: 10px;
                220px ;margin-left: 18px;">登录</div>
            <div id='inner'class='weizhuce'><br />没有账号？-点击注册</div>
        </div>    
        
        
    </body>
</html>
<script>
    function showLogIn(){
        var bodyHeight=document.body.clientHeight;       // 获取内容高度
        var clientHeight=document.documentElement.clientHeight;
        var clientWidth=document.documentElement.clientWidth;
 //创建div,即最大的遮罩层    
        var mask=document.createElement("div");     
        mask.className="mask";
        mask.style.height=bodyHeight+"px";
            document.body.appendChild(mask);
//点击遮罩层任意一处,退出遮罩层
        mask.onclick=function(){
            mask.remove();
            login.remove();
        }
//    创建新div
        var login=document.createElement("div");
        login.className="login";
          //使登陆框位于中间位置
        login.style.left=clientWidth/2-200+"px";      
        login.style.top=clientHeight/2-150+"px";  
//去掉display属性，使div能够显示
        var d=document.getElementById("a1").removeAttribute("display");  
//        将关闭按钮和id为a1的div写进classname为login的div中
        login.innerHTML="<div class='close-btn'>X</div>"+ document.getElementById("a1").innerHTML;
        document.body.appendChild(login);
//点击关闭按钮,退出遮罩层
        document.getElementsByClassName("close-btn")[0].onclick=function(){
            mask.remove();
            login.remove();
        }
    }
    
//当窗体大小发生变化时,让登陆框随窗体大小而改变
    document.body.onresize = function(){
        var clientHeight = document.documentElement.clientHeight;
        var clientWidth = document.documentElement.clientWidth;
        var login = document.getElementsByClassName("login")[0];
        login.style.left = clientWidth/2 - 200 + "px";
        login.style.top = clientHeight/2 - 150 + "px";
    }
</script>

登录页面 （带遮罩层的） ---2017-04--5

相关推荐

登录页面（带遮罩层的） ---2017-04--5