使用css实现弹窗难点是需要如何通过css触发弹窗的显示隐藏，html中的:target伪类提供了实现思路。当锚点值指向元素时该伪类就会作用与当前元素，我们就可以通过:target伪类控制元素的显示影藏

代码如下，我们通过设置锚点为#popup时，popup-cover:target选择器就会生效，将锚点设置为#即可关闭弹窗

<a class="btn" href="#popup">点击打开popup</a>

<div id="popup" class="popup-cover">
  <div class="popup-body">
    <div class="popup-title">
      <span>popup 标题</span>
      <a href="#">&#215;</a>
    </div>
    <div class="popup-content">
      popup content
    </div>
  </div>
  
</div>

<style>
body {
  background: #4B3C5D;
}
.btn {
  padding: 4px 10px;
  border: 1px solid white;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.popup-cover {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  background: rgb(0 0 0 / 41%);
}
.popup-cover .popup-body {
  margin: 120px auto;
  background: white;
  width: 300px;
  border-radius: 6px;
}
.popup-cover .popup-body .popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 18px;
  
}

.popup-cover .popup-body .popup-title a {
  text-decoration: none;
  color: black;
}
.popup-cover .popup-body .popup-content {
  padding: 12px 24px;
  font-size: 14px;
  
}
.popup-cover:target {
  visibility: visible;
  opacity: 1;
}
</style>

上述方法虽然能实现弹窗但会修改url可能会引起一些问题，如果有多层弹窗这个方式也无法实现。借助这个实现思路，我们可以找到另外一种伪类:checked，基于是否选中两种状态也可以用来选中弹窗显示隐藏，代码这里就不细写，如果有兴趣请使用AI编写。