CSS 彈框是網頁開發中常用的交互方式，通過彈框可以實現局部頁面的隱藏和顯示。本文將介紹如何使用 CSS 彈框實現隱藏和顯示的效果。 首先，在 HTML 文件中需要定義一個觸發彈框的元素，如下所示：

<button id="btn">點擊我彈出彈框</button>

這里定義了一個按鈕，用于觸發彈框的顯示。接下來，在 CSS 文件中，我們定義一個類來控制彈框的顯示和隱藏：

.show {
display: block;
}
.hide {
display: none;
}

這里我們定義了兩個類，分別用于顯示和隱藏彈框。如果彈框需要顯示，就添加 show 類，如果需要隱藏，就添加 hide 類。 接下來，我們需要在 JavaScript 中監聽按鈕的點擊事件，并根據當前狀態來切換彈框的顯示和隱藏。代碼如下所示：

var btn = document.getElementById("btn");
var dialog = document.getElementById("dialog");
btn.addEventListener("click", function() {
if (dialog.classList.contains("hide")) {
dialog.classList.remove("hide");
dialog.classList.add("show");
} else {
dialog.classList.remove("show");
dialog.classList.add("hide");
}
});

這里我們首先獲取按鈕和彈框的 DOM 元素，然后監聽按鈕的點擊事件。當點擊按鈕時，通過判斷當前彈框的狀態來切換 show 和 hide 類，達到顯示和隱藏的效果。 總的來說，使用 CSS 彈框實現隱藏和顯示的效果非常簡單。通過定義觸發元素、設置顯示和隱藏的類以及監聽點擊事件，可以輕松實現局部頁面的交互效果。