純CSS模態框是一個非常流行的前端設計元素，它通過使用純CSS來實現彈出式窗口。這個功能使得設計師能夠添加更多的交互能力到他們的頁面上，而不需要使用任何外部 JavaScript 庫。

/* 每個模態框都需要一個覆蓋層來遮蓋頁面內容 */
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
}
/* 模態框的主要樣式定義 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
padding: 20px;
z-index: 2;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
}
/* 當模態框被激活時 */
.modal-overlay.active, .modal.active {
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease-in-out, visibility 0s linear 0s;
}

使用這些 CSS 類實現彈出式模態框與具體的 HTML 結構深度耦合，并且演示了如何使用active類來啟用或禁用模態框。

從這里打開的鏈接，你可以看到這個純 CSS 模態框的完整演示。