纯css实现自定义弹窗(css 自定义变量)

纯css实现自定义弹窗 前言：

推荐整理分享纯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>