CSS是前端開發中不可或缺的一環。它可以幫我們快速、有效地實現各種效果，其中就包括制作彈出窗口。
我們先來看一下要實現的彈出窗口的樣式。一般情況下，彈出窗口分為兩種：模態框和非模態框。模態框是一種具有遮罩層的彈出窗口，用戶必須先處理窗口中的內容，才能繼續操作頁面。而非模態框沒有遮罩層，用戶可以隨時退出窗口。
下面我們使用CSS來制作一下兩種彈出窗口。
首先，我們要定義一個按鈕，用來觸發彈出窗口的出現。代碼如下：

<button class="btn">點擊我</button>

接下來，我們來制作模態框。首先要定義遮罩層，代碼如下：

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 999;
}

接下來是彈出窗口本身的樣式。我們在HTML中新建一個DIV元素，用來容納窗口中的內容：

<div class="modal">
<h2>標題</h2>
<p>內容</p>
</div>

然后，我們對這個DIV元素進行樣式定義：

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
z-index: 1000;
}

最后，我們再用一段JavaScript代碼來實現按鈕的功能，點擊按鈕時彈出模態框：

const btn = document.querySelector('.btn');
const modal = document.querySelector('.overlay');
btn.addEventListener('click', function() {
modal.style.display = 'block';
});

制作非模態框其實跟模態框差不多，只需要去掉遮罩層即可。代碼如下：

.popup {
position: absolute;
top: 150px;
left: 50%;
transform: translate(-50%, 0);
background-color: #fff;
padding: 20px;
border-radius: 5px;
z-index: 1000;
}
const btn = document.querySelector('.btn');
const popup = document.querySelector('.popup');
btn.addEventListener('click', function() {
popup.style.display = 'block';
});

以上就是CSS制作彈出窗口的方法。通過以上代碼，我們可以快速、有效地制作出各種彈出窗口的效果，提高頁面的交互性和美觀度。