| 手把手教你 CSS+JS 打造一个简易版弹出框 | 您所在的位置：网站首页 › 好看的简易边框 › 手把手教你 CSS+JS 打造一个简易版弹出框 |
手把手教你 CSS+JS 打造一个简易版弹出框
|
前言
这段时间闲下来了，整理了一下在面试中遇到的知识点，其中包括一个手写弹出框的题目。因此，这次我们要介绍的是如何制作一个弹出框。当然文章不止有单调的弹出框，正如标题所言，还加入了模糊背景效果，所以咱们开始接下来的制作吧。 效果展示为了方便后面的进展，这里可以先看一看最终的效果展示。
我们来分析一下整个效果，我们可以把它细分成如下几个部分：自定义文本和图片、按钮以及弹出框与模糊背景效果。 自定义文本和图片按钮弹出框和模糊背景因此我们可以从这三个部分分别入手。 自定义文本和图片自定义文本其实可有可无，我们完全可以只设计一个点击按钮来完成整个效果，而我们选择增加它是为了让整个界面的效果不那么单一。这一部分代码也比较简单，如下所示： 优质文章浅析： 对读者有帮助的文章，包括但不限于知识点解读、BUG的解决思路、需求的实现过程等，优质文章整体来讲定义较为抽象，但有两点硬性要求如下： 思路清晰，文章有一个主要输出的观点 结构清晰，应该有头有尾，完整的讲清楚自己的观点这一段 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 秒的过渡动画效果。 按钮设计按钮相关代码如下： Read More a{ position: relative; padding: 5px 20px; display: inline-block; margin-top: 20px; text-decoration: none; color: #fff; background: #111; }这里我们通过 a 标签来实现一个点击事件的按钮，然后再通过设计 CSS 样式部分使得它变得更像一个按钮，最后将它插入到上面提到的自定义文本和图片代码结构中。这里加入了一个点击事件函数 handoff，后续会有介绍。 弹出框与模糊背景现在到了最关键的一部分内容了，这一部分就涉及到 JS 知识的应用。 优质文章浅析： 对读者有帮助的文章，包括但不限于知识点解读、BUG的解决思路、需求的实现过程等，优质文章整体来讲定义较为抽象，但有两点硬性要求如下： 思路清晰，文章有一个主要输出的观点 结构清晰，应该有头有尾，完整的讲清楚自己的观点 Close这是一个包含弹出窗口的 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 代码块表示弹出窗口在激活状态下应该如何显示。它将弹出窗口设置为可见、完全不透明，并且在屏幕垂直方向上居中显示。 function handoff(){ let blur = document.getElementById('blur') blur.classList.toggle('active') let popup = document.getElementById('popup') popup.classList.toggle('active') }我们定义一个 handoff 的函数。当调用该函数时，它会获取 blur 和 popup 的元素，并通过使用 classList.toggle() 方法来切换这些元素的 active 类。这样可以使元素的可见性在显示和隐藏之间切换，从而实现弹出窗口的效果。 最终效果
上面就是关于整个弹出框和模糊背景的制作流程。前半程是关于如何丰富页面，后半程就是通过 JS 来实现弹出框了，如果大家对这些还有更好的想法，欢迎各位在评论区告诉我~ 本文正在参加「金石计划」 |
【本文地址】