CSS彈出層是網(wǎng)頁中常用的一種功能，點(diǎn)擊事件是彈出層效果中不可缺少的一種交互方式。在CSS中，我們可以通過使用“:target”選擇器來實(shí)現(xiàn)彈出層的點(diǎn)擊事件。

/* 定義彈出層樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 300px;
background-color: #fff;
z-index: 9999;
display: none; /* 初始狀態(tài)隱藏 */
}
/* 定義點(diǎn)擊事件，顯示彈出層 */
.popup:target {
display: block;
}
/* 定義關(guān)閉按鈕樣式 */
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
/* 在HTML中添加彈出層代碼 */
<p><a href="#popup1">點(diǎn)擊顯示彈出層</a></p>
<div class="popup" id="popup1">
<span class="close">×</span>
<p>這是彈出層的內(nèi)容</p>
</div>
<script>
/* 添加關(guān)閉按鈕點(diǎn)擊事件 */
document.querySelector(".close").addEventListener("click", function() {
location.href = "#";
});
</script>

在CSS中，我們通過使用“:target”選擇器來選擇當(dāng)前被點(diǎn)擊的元素，并對其進(jìn)行樣式操作，從而實(shí)現(xiàn)彈出層的顯示效果。同時，在HTML中添加一個鏈接，鏈接到彈出層的id，即可觸發(fā)彈出層的顯示。最后，我們使用JavaScript添加一個點(diǎn)擊事件，使得當(dāng)關(guān)閉按鈕被點(diǎn)擊時，頁面重新定位到頂部，從而實(shí)現(xiàn)彈出層的關(guān)閉效果。