CSS 冒泡對話框，是一種實現網頁長久以來的彈窗效果的方法。通過 CSS 實現彈窗效果，可以避免使用 JS 而導致的加載性能瓶頸以及兼容性問題。
首先，我們需要用 HTML 搭建一個基礎的頁面框架，以及一個觸發彈窗的按鈕。代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS冒泡對話框</title> <link rel="stylesheet" href="dialog.css"> </head> <body> <div class="wrapper"> <button class="btn">點擊我打開對話框</button> <div class="dialog"> <p>這是我的對話框。</p> </div> </div> </body> </html>
接下來，我們需要用 CSS 實現彈窗效果。具體思路是，我們給按鈕添加一個 :focus 偽類，當按鈕被點擊后，對話框會利用 CSS 中的偽元素 ::before 或 ::after 來進行顯示。對話框的出現可以通過使用 opacity 或 百分比布局來實現。代碼如下：
.dialog {
position:absolute;
z-index:100;
background-color:#fff;
border-radius:5px;
box-shadow:0 5px 10px rgba(0,0,0,0.3);
opacity: 0;
visibility: hidden;
transition: opacity .1s ease-out;
}
.btn:focus + .dialog{
visibility: visible;
opacity: 1;
}最后，我們可以對彈窗進行樣式上的增強，例如添加動畫效果、改變對話框大小顏色以及添加超鏈接等。以上代碼示例僅作為對冒泡對話框實現的簡單演示，并非完整實現過程。如果有需要，可以在代碼中自由地添加樣式或者改變代碼，以便實現對自己網頁的定制化需求。