模态框的显示与隐藏可通过纯 css 实现基础功能。使用 :target 伪类可实现简单切换，点击链接时 url 锚点触发模态框显示，关闭链接则隐藏；优点无需 js，缺点无法处理复杂交互。使用复选框 + 隐藏 input 可控制状态，label 触发 checkbox 状态变化，适合无 js 多状态控制，但需结构层级一致。复杂交互建议结合 js，css 负责样式定义，js 控制行为，实现遮罩层关闭、动画过渡等功能，保持结构清晰与分离。
模态框（Modal）在网页中很常见，比如弹出登录框、提示信息等。用 CSS 选择器控制它的显示与隐藏，其实并不需要太多 JavaScript，只要掌握几个关键点，就能实现基础功能。
使用 :target 伪类实现简单切换
:target 是一个非常实用的 CSS 伪类，它可以根据 URL 的锚点（hash）来匹配元素。我们可以利用这个特性来控制模态框的显示与隐藏。
HTML 结构大概是这样：
立即学习“前端免费学习笔记（深入）”；
<a href="#modal">打开模态框</a> <div id="modal" class="modal"> <a href="#">关闭</a> <div class="modal-content">这里是内容</div> </div>
然后在 CSS 中设置：
.modal {
display: none;
}
.modal:target {
display: block;
}这样一来，点击“打开模态框”链接时，URL 会带上 #modal，此时模态框就会显示；点击关闭链接，URL 锚点被清空，模态框就隐藏了。
优点：完全不需要 JS，适合轻量级场景。
缺点：无法处理复杂交互，比如点击遮罩层关闭等。
使用复选框 + 隐藏的 <input> 控制状态
如果你想不依赖 JS 实现更灵活的状态管理，可以用隐藏的 checkbox 来控制模态框的显示。
HTML 示例如下：
<label for="modal-toggle">打开模态框</label> <input type="checkbox" id="modal-toggle" hidden> <div class="modal"> <label for="modal-toggle">关闭</label> <div class="modal-content">内容区域</div> </div>
CSS 设置如下：
.modal {
display: none;
}
#modal-toggle:checked ~ .modal {
display: block;
}这种方式的好处是，你可以通过点击 label 触发 checkbox 的状态变化，从而控制模态框是否显示。
适用场景：想在没有 JS 的情况下控制多个状态。
注意点：结构上要保证 checkbox 和模态框处于同一层级，才能使用兄弟选择器 ~ 或相邻选择器 +。
复杂交互建议结合 JS，CSS 只负责样式
虽然上面两种方法都能实现模态框的显示和隐藏，但如果涉及到遮罩层点击关闭、ESC 键关闭、动画过渡等复杂行为，还是推荐搭配 JS 使用。
这时候 CSS 的角色就变成定义状态样式，比如：
.modal {
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.modal.show {
opacity: 1;
pointer-events: auto;
}然后通过 JS 切换 .show 类即可：
document.querySelector('.open-btn').addEventListener('click', () => {
document.querySelector('.modal').classList.add('show');
});优势：结构清晰，样式与逻辑分离。
建议：保持 CSS 负责视觉表现，JS 负责行为控制。
基本上就这些方式了。根据项目复杂度选择合适的方法就行。小功能尽量用纯 CSS 实现，节省资源；复杂场景还是交给 JS 比较稳妥。
