原生js——实现网页登录框、遮罩层（弹出层）效果、原页面进行登录
程序员文章站
2022-05-06 09:33:26
...
原生js——实现网页登录框、遮罩层效果
1.Demo展示（单击遮罩层、或单击关闭按钮即可实现对元素的移除）：
2 . Html布局（无任何代码）：
<body></body> <!--应用了js把div节点动态地插入到页面中；-->
- 以下为：将要在js里嵌入的Html源码(通过innerHTML嵌入时，不能写成下面这种格式，双引号要改为单引号，不然浏览器解析会出现问题，详情请往下看)：
<!-- <div id="login-wrap"> -->
<!-- <div class="login-content"> -->
<!-- <div class="login-close"> -->
<!-- <span class="glyphicon glyphicon-remove"></span> -->
<!-- </div> -->
<!-- <div class="login-head"> -->
<!-- <a href=""><img src="img/login-pic.jpg"></a> -->
<!-- </div> -->
<!-- <div class="login-body"> -->
<!-- <div class="login-form"> -->
<!-- <form> -->
<!-- <div class="account-number"> -->
<!-- <span class="glyphicon glyphicon-user"></span> -->
<!-- <input type="text" value="Username" required></input> -->
<!-- </div> -->
<!-- <div class="account-password"> -->
<!-- <span class="glyphicon glyphicon-lock"></span> -->
<!-- <input type="password" value="Password" required></input> -->
<!-- </div> -->
<!-- <div class="login-options"> -->
<!-- <lable class="select" for="remember-me"> -->
<!-- <input class="" type="radio" id="remember-me">Remember me</input> -->
<!-- </lable> -->
<!-- <a class="forgot-password" href="#" target=""><i>Forgot Password?</i></a> -->
<!-- </div> -->
<!-- <div class="submit"> -->
<!-- <input type="submit" value="LOGIN"></input> -->
<!-- </div> -->
<!-- </form> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div id="mask"></div> -->
3. css样式表（注意样式关联）：
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:red;
}
img{
width:100%;
height:100%;
}
#login-wrap{
background-color:#f0f0f0;
padding:20px 100px 100px 100px;
position:fixed;
z-index:10;
}
.login-content{
width:100%;
height:auto;
position:relative;
}
.login-close{
position:absolute;
top:-55px;
right:-90px;
width:30px;
height:30px;
line-height:30px;
text-align:center;
cursor:pointer;
}
.login-head{
width:120px;
height:120px;
margin:40px auto 25px auto;
border-radius:50%;
box-shadow:0 0 1px red;
background-color:#fff;
overflow:hidden;
}
.login-head a{
display:block;
width:120px;
height:120px;
}
/*前面的小三角形*/
.login-body:before{
content:"";
position:absolute;
bottom:100%;
left:50%;
margin-left:-16px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-bottom:16px solid #ccc;
}
.login-body{
width:500px;
height:auto;
background-color:#ccc;
position:relative;
}
.login-form{
padding:50px;
}
.account-number,
.account-password,
.submit{
width:400px;
height:50px;
line-height:50px;
}
.account-number,
.account-password
{
background-color:#fff;
border-radius:5px 5px;
box-shadow:0 0 3px purple;
}
.account-password
{
margin-top:20px;
}
.account-number input,
.account-password input
{
width:320px;
border:none;
background:none;
font-size:16px;
font-weight:300;
color:#666;
}
.login-options{
width:100%;
height:30px;
line-height:30px;
margin-top:15px;
}
.login-options .select,
.login-options a{
display:inline-block;
}
.login-options .select{
float:left;
}
.login-options a{
float:right;
}
.submit{
margin-top:15px;
cursor:pointer;
box-shadow:0 0 2px blue;
}
.submit input{
cursor:pointer;
border:none;
width:100%;
height:100%;
font-size:14px;
font-weight:400;
color:#fff;
background-color:blue;
}
.submit input:hover{
background-color:#999;
transition:background-color .5s linear;
color:green;
}
.glyphicon-user,
.glyphicon-lock,
.glyphicon-remove
{
padding:0 10px 0 15px;
font-size:20px;
top:5px;
color:#666;
}
.glyphicon-remove{
padding:0;
font-size:25px;
}
/*遮罩层*/
#mask{
position:absolute;
opacity:.75;
/* filter:alpha(opacity=75);/*为了兼容IE*/
z-index:5;
background-color:#000;
}
4. 原生js代码：
window.onload = function(){
//为以后的代码做准备（可以通过绑定登录按钮，来执行以下代码）
// var btn = document.getElementById("")；
function use(){
//获取浏览器的高度和宽度
var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;
//获取可视区域
var cHeight = document.documentElement.clientHeight;
var cWidth = document.documentElement.clientWidth;
//创建遮罩层
var mask = document.createElement("div");
mask.id = "mask";
mask.style.height = sHeight + "px";
mask.style.width = sWidth + "px";
document.body.appendChild(mask);
//创建登录框;
var login = document.createElement("div");
login.id ="login-wrap";
login.innerHTML = "<div class='login-content'><div class='login-close'><span class='glyphicon glyphicon-remove'></span></div><div class='login-head'><a href='#'><img src='img/login-pic.jpg'></a></div><div class='login-body'><div class='login-form'><form><div class='account-number'><span class='glyphicon glyphicon-user'></span><input type='text' value='Username' required></input></div><div class='account-password'><span class='glyphicon glyphicon-lock'></span><input type='password' value='Password' required></input></div><div class='login-options'><lable class='select' for='remember-me'><input type='radio' id='remember-me'>Remember me</input></lable><a class='forgot-password' href='' target=''><i>Forgot Password?</i></a></div><div class='submit'><input type='submit' value='LOGIN'></input></div></form></div></div></div>";
document.body.appendChild(login);
//当点击关闭按钮或者遮罩层时，关闭弹出的整个页面；
var close = document.querySelector(".login-close");
mask.onclick = close.onclick = function(){
document.body.removeChild(login);
document.body.removeChild(mask);
}
//获取登录框的宽高;
var loginWidth = login.offsetWidth;
var loginHeight = login.offsetHeight;
//给登录框进行固定定位,让其永远显示在屏幕正*;
login.style.top = (cHeight - loginHeight) / 2 + "px";
login.style.left = (cWidth - loginWidth) / 2 + "px";
}
use();//在外面调用执行函数;
}
注：
其实，这种技术比较简单；就是常见的window对象和document对象的一些使用；
-
元素的获取（HTML5新增）：
1.document.querySelector();
2.document.querySelectorAll();
其传值方式和传统方式一致，1获取到的是一个唯一的值（比如：当一个页面中出现相同的几个类时，获取到的只是第一个），只是2获取到的是一个数组； -
嵌入节点组：innerHTML；
-
添加节点：appendChild();
-
删除节点：removeChild();
-
可视区域的宽、高:
document.documentElement.clientHeight；
document.documentElement.clientWidth; -
div元素的宽、高：
offsetWidth;
offsetHeight; -
js对css属性的操作：（比较简单）
~如遇错误，欢迎指正；
下一篇： 值类型转换为引用类型——（装箱、拆箱）