css点击显示可关闭层 |css 选中框框

<style>
.popup {
display: none;  /* 隐藏弹出层 */
position: absolute; 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}
.popup.active {
display: block;  /* 显示弹出层 */
}
</style>
<button onclick="document.querySelector('.popup').classList.toggle('active')">点击显示</button>
<div class="popup">弹出层</div>

首先大家定义了一个类名为”popup”，它表示弹出层，并设置了一些样式信息。”display”属性设置为”none”时表示层是隐藏的，当点击按钮时，设置层的”active”类名即可让层显示出来。大家使用CSS的”transform”属性来使得层在水平和垂直方向上居中。

在HTML部分，大家定义了一个按钮，点击即可触发弹出层的显示。同时大家也定义了一个div元素，作为大家的弹出层。

使用CSS点击显示可关闭层能够增强网页的互动性，使得用户体验更好。