CSS彈出窗口是網站設計中經常使用的功能，可以有效提示用戶重要信息，提高頁面的互動性和美觀程度。本文將介紹如何使用CSS實現一個漂亮的彈出窗口。

/*CSS樣式*/
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
z-index: 9999;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9998;
}
.closebtn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
/*HTML代碼*/打開窗口
×
窗口標題
窗口內容
/*JavaScript代碼*/
function openPopup() {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
}
function closePopup() {
document.getElementById("overlay").style.display = "none";
document.getElementById("popup").style.display = "none";
}

以上代碼中，我們先定義了一個彈出窗口的樣式，并添加了陰影、邊框、圓角等元素，使窗口看起來更加美觀。同時設置一個遮罩層，用于防止用戶在彈出窗口出現時繼續操作頁面。我們還添加了一個關閉按鈕，并設置了打開窗口和關閉窗口的JavaScript函數。

使用時，只需要在需要彈出窗口的地方添加一個按鈕，并設置onclick事件為openPopup()函數即可。具體實現可以根據自己的需求進行調整，例如更改窗口的大小、顏色等等。使用CSS制作彈出窗口，可以提供更好的用戶體驗，同時也增加了網站的美觀度。