弹出层详解

最新推荐文章于 2020-09-12 20:32:12 发布

温清夜

最新推荐文章于 2020-09-12 20:32:12 发布

阅读量3.8k

点赞数 3

分类专栏： CSS 文章标签： JS 弹出层

本文链接：https://blog.csdn.net/qq_37288477/article/details/86484405

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我看面经的时候，第一次遇到弹出层这个词，以前从来没有遇见过，上网看了看，没有一个是能说明白的，后来特意去看了很多的视频，下面就给大家详细解说下弹出层这个概念

弹出层和弹窗

我当初以为弹窗和弹出层是一个东西，后来也问了很多人，在广义上，他们确实相同。为啥这样说呢？
因为二者都是点击一个按钮然后出来一个创建(多用于登录界面).
但是详细的来分，二者是有区别的！弹窗一般弹出来的窗口都是垂直居中于页面的，而且只是弹出一个窗口没有什么别的特效,看下图
在这里插入图片描述
弹出层是由一个遮罩层的，什么是遮罩层，大家看下百度百科的定义

遮罩层：可以将与遮罩层相链接的图形中的图像遮盖起来。用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。

遮罩层必须至少有两个图层，上面的一个图层为“遮罩层”，下面的称“被遮罩层”；这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。

它的原理是：上面一层是遮罩层，下面一层是被遮罩层。遮罩层上的图，自己是不显示的。它只起到一个透光的作用。假定遮罩层上是一个正圆，那么光线就会透过这个圆形，射到下面的被遮罩层上，只会显示一个圆形的图形。如果遮罩层上什么都没有，那么光线就无法透到下面来，那么下面的被遮罩层什么也显示不出来。
大家看下图

遮罩层其实就是那个透明黑色的背景，它把真个页面的背景都给遮罩住，就算你滚动滑动条，往下滑，同样也是遮罩层.

弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹出层父级,这个层完全透明,并且与遮罩层重合.最上层是弹出层,它的活动范围在其父层的范围内.
弹出时,隐藏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;
}