CSS彈出層在網站設計中非常常見。在過去，為了創建彈出層，需要使用JavaScript編寫。但是，現在使用純CSS編寫彈出層代碼也非常普遍。在本文中，我們將演示如何使用純CSS創建一個彈出層。

.popup_container {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
}
.popup_content {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
width: 80%;
max-width: 500px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}
.popup_container.active, .popup_content.active {
display: block;
}

在上面的代碼中，我們首先創建了一個名為popup_container的div，用于包含彈出層。此div是固定定位的，鋪滿整個屏幕，背景顏色為黑色，透明度為0.6。此div默認情況下是隱藏的(display:none)。

接下來，我們創建了一個名為popup_content的div，用于彈出層的內容。此div位置為固定，居中顯示在屏幕上，背景顏色為白色，寬度為80%（最大寬度為500px），并通過box-shadow屬性添加了陰影效果。此div也默認情況下是隱藏的(display:none)。

最后，我們為彈出層添加了.active類來顯示它們。只需通過JavaScript動態地添加或刪除.active類即可創建或關閉彈出層。以下是使用JavaScript顯示彈出層的示例代碼：

const popupContainer = document.querySelector('.popup_container');
const popupContent = document.querySelector('.popup_content');
popupContainer.classList.add('active');
popupContent.classList.add('active');

如上所示，我們選擇.popup_container和.popup_content元素，并向它們添加.active類，以顯示彈出層。

以上是純CSS編寫彈出層的詳細過程。通過簡單的CSS樣式，我們就可以實現一個美觀的彈出層。這種方法可以為網站設計提供更多自由度，更容易實現復雜的用戶交互效果。