在網頁中，彈窗是一個重要的元素。它可以吸引用戶的注意力，引導用戶進行相關操作。在這篇文章中，我們將介紹如何使用CSS編寫彈窗。

/* 定義彈窗樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
z-index: 1000;
}
/* 定義彈窗中的按鈕樣式 */
.popup button {
display: block;
margin: 10px auto;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* 定義彈窗關閉按鈕樣式 */
.popup button.close {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
font-weight: bold;
background-color: transparent;
color: #ccc;
border: none;
cursor: pointer;
}
/* 隱藏彈窗 */
.popup.hidden {
display: none;
}

以上代碼定義了彈窗的樣式，其中包括彈窗的位置、大小、背景色、邊框等。同時還定義了彈窗中的按鈕樣式和關閉按鈕樣式，以及隱藏彈窗的樣式。接下來，我們可以編寫JavaScript代碼來控制彈窗的顯示和隱藏。

// 獲取彈窗元素
var popup = document.querySelector('.popup');
// 獲取關閉按鈕元素
var closeBtn = document.querySelector('.popup button.close');
// 獲取按鈕元素
var btn = document.querySelector('.btn');
// 添加點擊事件監聽器
btn.addEventListener('click', function(event) {
// 取消a標簽的默認事件
event.preventDefault();
// 顯示彈窗
popup.classList.remove('hidden');
});
// 添加關閉按鈕的點擊事件監聽器
closeBtn.addEventListener('click', function(event) {
// 隱藏彈窗
popup.classList.add('hidden');
});

通過以上代碼，我們可以實現彈窗的顯示和隱藏。當用戶點擊按鈕時，會顯示彈窗；當用戶點擊關閉按鈕時，會隱藏彈窗。

最后，我們可以將以上代碼整合到一個文件中，例如：

點擊顯示彈窗
×
這是一個彈窗
在這里可以添加彈窗的內容
確定

在實際項目中，還可以根據需求對彈窗進行定制，例如添加動畫效果、設置彈窗大小、更改彈窗背景色等。