知识点:
- a 标签点击改变页面链接中的 hash 部分。
- :target 选择器可以选中和页面 hash 相同的标签(标签的 id 和页面 hash 相同)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>纯CSS弹框</title>
<style>
.model{
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
}
.model:target{
display:block;
}
</style>
</head>
<body>
<a href="#model">Open Model</a>
<div class="model" id="model">
<h1>这是一个弹框</h1>
<a href="#">Close Model</a>
</div>
</body>
</html>