CSS彈出模態框是一種常用的網頁效果，它可以讓用戶在當前頁面中彈出一個居中的窗口，用于展示彈出內容或者進行交互。下面我們將介紹如何使用CSS實現彈出模態框。

首先，我們需要先定義一個HTML結構，如下所示：

<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>這里是彈出內容</p>
</div>
</div>

其中，class為modal的div是我們整個彈出框的容器，class為modal-content的div是我們彈出框中的內容區域，而class為close的span是用于關閉彈出框的按鈕。

接著，我們需要用CSS給這個HTML結構添加樣式。具體代碼如下：

.modal {
display: none; 
position: fixed; 
z-index: 1; 
left: 0;
top: 0; 
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgba(0,0,0,0.4); 
}
.modal-content {
background-color: #fefefe;
margin: 15% auto; 
padding: 20px;
border: 1px solid #888;
width: 80%; 
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

在上面的代碼中，我們對class為modal的div設置了一些基本的樣式，使它能夠撐滿整個窗口并且遮罩層為半透明黑色。而class為modal-content的div則被設置為白色背景和帶有邊框的內容區域，并居中顯示在頁面上。最后，關閉按鈕class為close被設置成浮動樣式，并在鼠標懸停和點擊時改變顏色。

最后，我們需要使用JavaScript來控制彈出框的顯示和隱藏。具體代碼如下：

var modal = document.getElementsByClassName("modal")[0];
var btn = document.getElementById("btn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

上面的代碼中，我們首先獲取到class為modal的div以及用于打開彈出框的按鈕和關閉按鈕。然后，當用戶點擊打開按鈕時，我們使用JavaScript將彈出框的display屬性設置為block來實現顯示。而當用戶點擊關閉按鈕或者在空白處點擊時，我們則將display屬性設置為none來實現隱藏。

通過以上步驟，我們就成功地使用CSS和JavaScript實現了一個簡單的彈出模態框效果。