登录页面
<!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{ width: 300px; height: 450px; position: absolute; } #inner{ width: 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 id="a1" style="display: none;"> <div id='inner' class='yonghuming'> 用户名:<input type="text" placeholder="用户名/手机号"> </div> <div id='inner'class='password'> 密码: <input type="password" placeholder="请输入密码"> </div> <div id='inner'class='denglu' style="background-color:gray;margin-top: 10px; width: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>
登录页面(带遮罩层的)