弹出层详解

最新推荐文章于 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;
}

温清夜

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
弹出层详解

我看面经的时候，第一次遇到弹出层这个词，以前从来没有遇见过，上网看了看，没有一个是能说明白的，后来特意去看了很多的视频，下面就给大家详细解说下弹出层这个概念弹出层和弹窗我当初以为弹窗和弹出层是一个东西，后来也问了很多人，在广义上，他们确实相同。为啥这样说呢？因为二者都是点击一个按钮然后出来一个创建(多用于登录界面).但是详细的来分，二者是有区别的！弹窗一般弹出来的窗口都是垂直居中于页面的，...
复制链接

扫一扫

专栏目录