CSS是一種常用的前端語言，能方便地實現各種效果。其中，通過CSS實現點擊后出現彈窗，可以讓網頁在用戶體驗上更具互動性和友好度。

.popup-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
display: none;
}
.btn {
background-color: #337ab7;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover {
background-color: #23527c;
}

上述CSS代碼中，“.popup-container”是彈窗的容器，通過設置定位和層級等屬性來使得彈窗能夠在頁面內正常顯示。其中，給容器添加“display: none;”屬性，是為了讓彈窗一開始不可見，只有在點擊頁面上的按鈕后才會顯示出來。

而“btn”則是用來定義觸發彈窗顯示的按鈕的樣式。其中，“cursor: pointer;”可以表示此按鈕是一個可點擊的元素，同時“:hover”偽類可以讓按鈕在鼠標懸浮時顯示更為醒目的樣式。

<button class="btn" onclick="showPopup()">點擊我</button>
<div class="popup-container" id="popup">
<p>這是一個彈窗</p>
<button class="btn" onclick="hidePopup()">關閉</button>
</div>
<script>
function showPopup() {
document.getElementById("popup").style.display = "block";
}
function hidePopup() {
document.getElementById("popup").style.display = "none";
}
</script>

上述HTML代碼中，“button”元素的“onclick”屬性可以用來綁定彈窗的顯示事件，在點擊“點擊我”按鈕后會調用“showPopup()”函數，使得原本被隱藏的彈窗容器以“block”方式顯示在頁面上。

同理，“popup-container”中的第二個按鈕上的“onclick”屬性也可以綁定“hidePopup()”函數，當點擊關閉按鈕時，通過設置彈窗容器的“display”為“none”，來隱藏彈窗，以此達到關閉彈窗的效果。

在使用CSS實現點擊后出現彈窗的效果時，需要同時進行CSS和JavaScript的編寫，將它們有效地結合起來，才能實現一個完美的用戶體驗。