CSS可用來實現多種有趣的交互效果，其中之一就是點擊彈出可關閉彈窗。這種效果非常流行，可以用來實現諸如提示消息、登錄窗口、定制菜單等功能。
/* 樣式代碼 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 250px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: none;
}
.popup .header {
font-size: 1.2em;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.popup .content {
padding: 10px;
}
.popup .close {
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}上面的樣式代碼定義了一個名為.popup的元素，它是一個固定定位（position: fixed）的彈窗，居中顯示（top: 50%; left: 50%; transform: translate(-50%, -50%)），寬度為400px，高度為250px，背景色為白色（background-color: white），圓角為5px（border-radius: 5px），帶有10px的陰影（box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)）。彈窗分為頭部（.header）、內容（.content）和關閉按鈕（.close），它們各自設置了一些樣式。最后，還定義了一個名為.overlay的元素，它用來實現半透明的遮罩效果。
彈窗標題×彈窗內容
上面的HTML代碼包括一個按鈕，一個彈窗（.popup）、一個遮罩（.overlay）和一些JavaScript代碼。當用戶點擊按鈕時，JavaScript代碼會調用togglePopup()函數，用來切換彈窗和遮罩的顯示狀態。當彈窗和遮罩都處于隱藏狀態（display: none）時，點擊按鈕會使它們都顯示出來（display: block）。反之，當它們都處于顯示狀態時，點擊按鈕會使它們都隱藏起來。
總之，這種點擊彈出可關閉彈窗的功能可以通過CSS和JavaScript實現，非常方便實用。除了上面簡單的示例，還可以添加更多的效果和功能，比如動畫效果、表單驗證等。希望本文能為讀者提供一些靈感和參考。