手把手教你 CSS+JS 打造一个简易版弹出框

一条会coding的Shark
2,728 阅读5分钟

前言

这段时间闲下来了，整理了一下在面试中遇到的知识点，其中包括一个手写弹出框的题目。因此，这次我们要介绍的是如何制作一个弹出框。当然文章不止有单调的弹出框，正如标题所言，还加入了模糊背景效果，所以咱们开始接下来的制作吧。

效果展示

为了方便后面的进展，这里可以先看一看最终的效果展示。

实现过程

我们来分析一下整个效果，我们可以把它细分成如下几个部分：自定义文本和图片、按钮以及弹出框与模糊背景效果。

自定义文本和图片按钮弹出框和模糊背景
image.pngimage.pngimage.png

因此我们可以从这三个部分分别入手。

自定义文本和图片

自定义文本其实可有可无，我们完全可以只设计一个点击按钮来完成整个效果，而我们选择增加它是为了让整个界面的效果不那么单一。这一部分代码也比较简单，如下所示：

  <div class="container" id="blur">
        <div class="content">
            <h2>优质文章浅析：
                <br>
                对读者有帮助的文章，包括但不限于知识点解读、BUG的解决思路、需求的实现过程等，优质文章整体来讲定义较为抽象，但有两点硬性要求如下：
                <br>
                思路清晰，文章有一个主要输出的观点
                <br>
                结构清晰，应该有头有尾，完整的讲清楚自己的观点
            </h2>
            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53f766a11ace46c79e493cb19007cedb~tplv-k3u1fbpfcp-watermark.image?" alt="">
        </div>
    </div>

这一段 html 结构比较清晰，通俗易懂，通过一段文本内容和一张图片撑起了整个结构。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: '微软雅黑',sans-serif;
}
.container{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: skyblue;
    transition: 0.5s;
    padding: 20px;
}
.container .content{
    position: relative;
    max-width: 800px;
}
h2{
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}
.container .content img{
    max-width: 100%;
    display: block;
}

这一部分的样式也没有很难的部分，基本上都是很基础很常见的属性。这里单独介绍一下transition 属性吧，它是一个过渡属性。transition 属性可以被指定为一个或多个 CSS 属性的过渡效果。它经常会在CSS样式中出现，是一个常用样式。transition: 0.5s; 表示该元素的过渡效果时长为 0.5 秒，即当该元素从不可见到可见时，会有一个 0.5 秒的过渡动画效果。

按钮设计

按钮相关代码如下：

<a href="#" onclick="handoff()">Read More</a>

a{
    position: relative;
    padding: 5px 20px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    color: #fff;
    background: #111;
}

这里我们通过 a 标签来实现一个点击事件的按钮，然后再通过设计 CSS 样式部分使得它变得更像一个按钮，最后将它插入到上面提到的自定义文本和图片代码结构中。这里加入了一个点击事件函数 handoff，后续会有介绍。

弹出框与模糊背景

现在到了最关键的一部分内容了，这一部分就涉及到 JS 知识的应用。

   <div id="popup">
        <h2>优质文章浅析：</h2>
        <p>对读者有帮助的文章，包括但不限于知识点解读、BUG的解决思路、需求的实现过程等，优质文章整体来讲定义较为抽象，但有两点硬性要求如下：
            <br>
            思路清晰，文章有一个主要输出的观点
            <br>
            结构清晰，应该有头有尾，完整的讲清楚自己的观点
        </p>
        <a href="#" onclick="handoff()">Close</a>
    </div>

这是一个包含弹出窗口的 HTML 元素，其中包含了一个标题和一段文字描述。设计好弹出框的基本结构，弹出窗口还包含了一个关闭按钮，点击它可以关闭弹出窗口。

.container#blur.active{
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}
#popup{
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    padding: 50px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
#popup.active{
    visibility: visible;
    opacity: 1;
    top: 50%;
}

blur 作为英文单词表示变得模糊不清，模糊形状。这里就是通过 filter: blur(20px); 来实现模糊背景效果的。当 class 为 container 的元素变成 active 类时，元素模糊，模糊程度为 20 像素。像这些样式的组合通常用于创建一个模态框或弹出窗口。

然后就是定义 popup 的样式了。因为是弹出框，所以我们通过 position: fixed; 来使元素固定在页面上，不随页面滚动而移动。这里的 transform: translate(-50%,-50%); 表示将该元素向左上方偏移自身宽度和高度的 50%，使其位于页面中心位置。因为 popup 元素在最开始的时候是不需要显示的，因此需要设置 visibility: hidden; 使其隐藏起来。

最后 #popup.active 这个 CSS 代码块表示弹出窗口在激活状态下应该如何显示。它将弹出窗口设置为可见、完全不透明，并且在屏幕垂直方向上居中显示。

 <script>
        function handoff(){
            let blur = document.getElementById('blur')
            blur.classList.toggle('active')
            let popup = document.getElementById('popup')
            popup.classList.toggle('active')
        }   
    </script>

我们定义一个 handoff 的函数。当调用该函数时，它会获取 blur 和 popup 的元素，并通过使用 classList.toggle() 方法来切换这些元素的 active 类。这样可以使元素的可见性在显示和隐藏之间切换，从而实现弹出窗口的效果。

最终效果

总结

上面就是关于整个弹出框和模糊背景的制作流程。前半程是关于如何丰富页面，后半程就是通过 JS 来实现弹出框了，如果大家对这些还有更好的想法，欢迎各位在评论区告诉我~

本文正在参加「金石计划」

avatar
文章
阅读
粉丝