[css]纯css实现自定义弹窗，点击指定链接弹出页面

来源：css实现自定义弹窗　浏览：623次　时间：2023-02-08

前言：

有必要先了解以下思路再进行代码的书写

思路：
### 其实弹窗实现很简单：
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

版权与免责声明：

凡注明稿件来源的内容均为转载稿或由网友用户注册发布，本网转载出于传递更多信息的目的；如转载稿涉及版权问题，请作者联系我们，同时对于用户评论等信息，本网并不意味着赞同其观点或证实其内容的真实性；

本文地址：https://top.cnzzla.com/artinfo/79118.html