我看面经的时候，第一次遇到弹出层这个词，以前从来没有遇见过，上网看了看，没有一个是能说明白的，后来特意去看了很多的视频，下面就给大家详细解说下弹出层这个概念
弹出层和弹窗
我当初以为弹窗和弹出层是一个东西，后来也问了很多人，在广义上，他们确实相同。为啥这样说呢？
因为二者都是点击一个按钮然后出来一个创建(多用于登录界面).
但是详细的来分，二者是有区别的！弹窗一般弹出来的窗口都是垂直居中于页面的，而且只是弹出一个窗口没有什么别的特效,看下图
弹出层是由一个遮罩层的，什么是遮罩层，大家看下百度百科的定义
遮罩层：可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。
遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。
它的原理是：上面一层是遮罩层，下面一层是被遮罩层。遮罩层上的图，自己是不显示的。它只起到一个透光的作用。假定遮罩层上是一个正圆，那么光线就会透过这个圆形，射到下面的被遮罩层上，只会显示一个圆形的图形。如果遮罩层上什么都没有，那么光线就无法透到下面来，那么下面的被遮罩层什么也显示不出来。
大家看下图
遮罩层其实就是那个透明黑色的背景，它把真个页面的背景都给遮罩住，就算你滚动滑动条，往下滑，同样也是遮罩层.弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹出层父级,这个层完全透明,并且与遮罩层重合.最上层是弹出层,它的活动范围在其父层的范围内.
弹出时,隐藏body的滚动条
遮罩层位于body直属,固定定位,大小与视口相等.不必有dom,在每次弹出时,由js直接生成.
弹出层父级位于body直属,透明隐藏,大小同遮罩层,自动垂直滚动条.位于遮罩层与弹出层之间.
弹出层是一个自定义的DOM,位于最上层.
每个弹出层可做一个模板,放在templete标记内.
面试题:设计弹出层的具体过程
弹出框的HTML代码并不是在html页面内书写的，而是在JS中自己添加的结构，但是这些结构的样式我们可以事先将弹出框结构的CSS的样式写出来。
1.首先写好弹出框的CSS样式
2.使用JS代码，创建遮罩层
3.使用JS代码，创建弹出框
4.牵扯定位的时候，就需要使用JS来获取页面的宽高等。
5.添加按钮事件，点击的时候，就会创建遮罩层和弹出框，并添加到body里面
6.添加删除事件，点击的时候，就会删除遮罩层和弹出框.
实例
下面给大家详细的代码
牵涉的知识点
定位
absolute
relative
fixed
事件
onload
onclick
DOM操作
getElementById()
scrollHeight()
clientHeight()
createElement()
appendChild()
removerChild()
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>弹出层设计</title>
<script>
function openNew() {
//获取页面的总高度 宽度
let scrollHeight = document.documentElement.scrollHeight;
let scrollWidth = document.documentElement.scrollWidth;
let mark = document.createElement("div")
mark.id = "mark";
mark.style.width = scrollWidth + "px";
mark.style.height = scrollHeight + "px";
let login = document.createElement("div")
login.id = "login"
login.innerHTML =
"<h1>登录</h1> <label>账户</label><input type='text'><br><label>密码</label><input type='password'><button id='close'>关闭</button>"
//获得可视区域的高度宽度
let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;
document.body.appendChild(login)
document.body.appendChild(mark)
//获取登录框的高度宽度
let LoginWidth = login.offsetWidth;
let LoginHeight = login.offsetHeight;
let leftFixed = (clientWidth - LoginWidth) / 2 + "px"
let topFixed = (clientHeight - LoginHeight) / 2 + "px"
console.log(LoginWidth)
login.style.left = leftFixed;
login.style.top = topFixed;
let close = document.getElementById("close")
mark.onclick = close.onclick = function() {
document.body.removeChild(mark)
document.body.removeChild(login)
}
}
window.onload = function() {
let btn = document.getElementById("btn")
btn.onclick = function() {
openNew()
}
}
</script>
</head>
<body>
<footer class="footer">
<a href="#">首页</a>
<a href="#">详情</a>
<a href="#">联系</a>
<a href="#">介绍</a>
<button id="btn">登录</button>
</footer>
<!-- <div id="mark"></div>
<div id="login">
<h1>登录</h1>
<label>账户</label>
<input type="text">
<br>
<label>密码</label>
<input type="password">
<button id="close">关闭</button>
</div> -->
</body>
</html>
CSS代码
* {
margin: 0;
padding: 0;
}
.footer {
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.6);
}
a {
display: inline-block;
text-decoration: none;
width: 20%;
color: white;
font-size: 20px;
margin-top: 10px;
}
#btn {
float: right;
width: 100px;
height: 30px;
background: red;
color: white;
font-size: 12px;
border: none;
margin-top: 10px;
margin-right: 100px;
}
body {
background: yellow;
height: 2000px;
width: 100%;
}
#mark {
height: 1000px;
width: 100%;
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#login {
width: 500px;
height: 400px;
background: rgba(236, 18, 18, 0.5);
text-align: center;
position: fixed;
z-index: 11;
}
#login input {
width: 400px;
height: 50px;
margin-top: 100px;
}
#login input[type="password"] {
margin-top: 40px;
}
#close {
width: 100px;
height: 30px;
background: red;
color: white;
font-size: 12px;
border: none;
margin-top: 50px;
}
