位置: IT常识 - 正文
纯css实现自定义弹窗(css 自定义变量)
编辑：rootadmin纯css实现自定义弹窗 前言：
本文链接地址:https://www.jiuchutong.com/zhishi/297849.html
转载请保留说明！
推荐整理分享纯css实现自定义弹窗(css 自定义变量)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css自定义选择器,自定义css样式怎么添加,css自定义函数,css自定义属性,css自定义函数,自定义css是什么意思,自定义css怎么写,自定义css怎么写,内容如对您有帮助，希望把文章链接给更多的朋友！
有必要先了解以下思路再进行代码的书写
思路### 其实弹窗实现很简单： 1. 首先准备一个顶层div 将作为弹窗 设置z-index为一个比较大的值，如z-index=30，使其置于顶层； 设置display:none，使初始被隐藏； 2. 添加锚定行为 定义一个a标签，使被点击时弹窗div被锚定，会触发被锚定标签的“当前活动”伪类样式 3. 给弹窗div设置“当前活动”伪类样式，即：弹窗div:target{css} 使其显示：display:block 4. 给弹窗div添加一个子a标签，用于隐藏窗口 给这个子a标签href="#" 当点击后使弹窗div不为当前活动元素，从而使其target伪类样式不生效### 另外使整个网页背景虚化： 其实也是主要利用z-index来实现一个图层，该图层尺寸占整个网页窗口尺寸、有一定的透明度、在弹窗div中定义作为其子元素(使具有和弹窗相同的行为)代码<style> html,body{ margin: 0; padding: 0; width: 100%; height:100%; } .app{ width: 100%; height: 100%; } .window{ position: fixed; top: 0; right: 0; left: 0; bottom: 0; display: none; background-color: rgba(0, 0, 0, 0.2); z-index: 20; /*背景层*/ text-align: center; } .window:target{ display: block; } .window_content{ width: 400px; height: 400px; margin: 15% auto; z-index: 30; /*置顶窗口层*/ background-color: pink; }</style><!-- 在这里设置一个弹窗 --><div id="window" class="window"> <div class="window_bg"></div> <div class="window_content"> <h1>MyWindow</h1> <h2>hello world</h2> <a href="#">关闭</a> </div></div><div class="app"> <button class="link"> <a href="#window">弹窗</a> </button></div>上一篇：前端面试题 | 什么是回流和重绘？它们的区别是什么？(前端面试题什么是网络协议)
下一篇：损失函数 | BCE Loss（Binary CrossEntropy Loss）(损失函数是什么)
