CSS全屏彈窗是一種常見的前端實現方式，可以在網頁中呈現一個彈窗，讓用戶進行交互，常用于登錄、注冊、提示等場景。本文將介紹如何使用CSS實現全屏彈窗。

首先，在HTML中添加彈窗的基礎結構，包括一個遮罩和彈窗容器，如下所示：

<div class="mask"></div>
<div class="popup"></div>

然后，在CSS中設置彈窗樣式，包括寬高、位置、背景色等，如下所示：

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background-color: #fff;
z-index: 10000;
overflow: auto;
}

彈窗樣式設置完成后，使用JavaScript代碼通過增加或移除CSS類來控制彈窗的顯示和隱藏。

// 彈出彈窗
function showPopup() {
document.querySelector('.mask').classList.add('show');
document.querySelector('.popup').classList.add('show');
}
// 關閉彈窗
function hidePopup() {
document.querySelector('.mask').classList.remove('show');
document.querySelector('.popup').classList.remove('show');
}

這樣就完成了一個簡單的CSS全屏彈窗。

需要注意的是，彈窗容器的overflow屬性需要設置為auto，這樣當彈窗內容溢出時，會出現滾動條，方便用戶閱讀。

總的來說，使用CSS實現全屏彈窗是一個簡單且常見的前端實現方式，通過上述方法可以快速實現。