CSS中的點(diǎn)擊后關(guān)閉效果可以用于很多不同的場(chǎng)合，比如彈出框、下拉菜單等等。在這篇文章中，我們將介紹如何使用CSS來(lái)實(shí)現(xiàn)點(diǎn)擊后關(guān)閉的效果。

.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

上面的CSS代碼展示了一個(gè)簡(jiǎn)單的彈出框的代碼，其中包含了點(diǎn)擊后關(guān)閉的代碼實(shí)現(xiàn)：

• 彈出框的容器是一個(gè)position: fixed的元素，通過(guò)設(shè)置它的display: none屬性，來(lái)實(shí)現(xiàn)默認(rèn)不顯示的效果。
• 在彈出框容器中，定義了一個(gè)popup-content元素，用來(lái)包含彈出框的內(nèi)容。它的位置通過(guò)設(shè)置top和left為50%以及transform屬性實(shí)現(xiàn)垂直居中和水平居中。
• 最后，使用close類來(lái)定義一個(gè)關(guān)閉按鈕，通過(guò)設(shè)置它的position以及cursor屬性，讓它顯示到右上角，并且當(dāng)鼠標(biāo)懸停在它上面時(shí)，鼠標(biāo)變成手型。

有了上面的基礎(chǔ)代碼，我們就可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)點(diǎn)擊彈出框外面的區(qū)域也能關(guān)閉彈出框：

const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close');
popup.addEventListener('click', function(e) {
if (e.target.classList.contains('popup')) {
popup.style.display = 'none';
}
});
closeBtn.addEventListener('click', function() {
popup.style.display = 'none';
});

我們使用querySelector來(lái)獲取彈出框容器和關(guān)閉按鈕，然后通過(guò)addEventListener來(lái)給它們綁定事件。

• 當(dāng)點(diǎn)擊彈出框容器的時(shí)候，判斷點(diǎn)擊的元素是否是彈出框容器本身，如果是，說(shuō)明點(diǎn)擊在了彈出框外面，此時(shí)將彈出框隱藏（display: none）。
• 當(dāng)點(diǎn)擊關(guān)閉按鈕的時(shí)候，直接將彈出框隱藏（display: none）。

這樣，我們就通過(guò)CSS和JavaScript實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的點(diǎn)擊后關(guān)閉的效果。如果你希望實(shí)現(xiàn)更復(fù)雜的效果，可以根據(jù)上面的代碼進(jìn)行修改和擴(kuò)展。