CSS彈出頁(yè)面樣式是一種常見的前端技術(shù)，可以實(shí)現(xiàn)點(diǎn)擊按鈕或鏈接時(shí)，彈出一個(gè)頁(yè)面或?qū)印＿@種樣式不僅使頁(yè)面更加美觀，而且可以不跳轉(zhuǎn)頁(yè)面，提高頁(yè)面的用戶體驗(yàn)。接下來(lái)我們來(lái)看一下實(shí)現(xiàn)這種樣式的代碼。

.pop-up {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px 2px rgb(0, 0, 0, 0.2);
z-index: 999;
padding: 20px;
display: none;
}
.btn {
display: inline-block;
background-color: #FF5722;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover {
background-color: #E64A19;
}
.btn:focus + .pop-up {
display: block;
}

在代碼中，我們首先定義了一個(gè)名為“pop-up”的類，它的位置是固定的，位于屏幕的中央。它的背景顏色為白色，圓角半徑為5px，陰影效果使得它與頁(yè)面分離，同時(shí)也給出了溫和的外觀，非常適合展示內(nèi)容。我們?cè)O(shè)置類的初始值為不可見，以便在按鈕被點(diǎn)擊時(shí)彈出。

定義了“pop-up”類之后，我們又定義了一個(gè)類名為“btn”的樣式，它將用來(lái)作為彈出頁(yè)面的按鈕。按鈕的顏色設(shè)置為橙色，并帶有圓角邊框。我們也定義了懸停時(shí)按鈕背景顏色的改變。

我們使用“+”符號(hào)將按鈕和彈出框連接起來(lái)。在按鈕得到焦點(diǎn)時(shí)，通過(guò)設(shè)置“pop-up”類的display屬性為“block”，來(lái)將它展示出來(lái)。

另外，我們也可以通過(guò)使用JavaScript來(lái)控制彈出框，比如在頁(yè)面載入時(shí)彈出或是關(guān)閉指定時(shí)間后自動(dòng)關(guān)閉等操作，都可以給用戶更加方便的操作方式。