CSS是前端開發中常用的樣式語言。其中，彈出框是網頁開發中不可或缺的一部分。使用CSS可以輕松地實現一個簡單的彈出框效果。
下面是一個基本的HTML結構，其中包含一個按鈕和一個隱藏的彈出框：
<!DOCTYPE html> <html> <head> <title>CSS彈出框</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn">點擊彈出框</button> <div class="popup"> <p>這是一個彈出框。</p> <button class="close">關閉</button> </div> </body> </html>
接下來是style.css中的代碼，實現了彈出框的基本樣式：
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
}
.popup {
display: none;
position: absolute;
z-index: 999;
background-color: #f1f1f1;
border: 1px solid black;
padding: 20px;
}
.close {
background-color: #f44336;
color: white;
border: none;
padding: 8px 16px;
margin-top: 20px;
}最后是使用JavaScript實現彈出框的顯示和隱藏：
let btn = document.querySelector('.btn');
let popup = document.querySelector('.popup');
let close = document.querySelector('.close');
btn.onclick = function() {
popup.style.display = 'block';
}
close.onclick = function() {
popup.style.display = 'none';
}通過這些簡單的代碼，就可以實現一個基本的CSS彈出框。