Div CSS 彈出窗口是網(wǎng)頁(yè)設(shè)計(jì)中非常常見(jiàn)的功能，可以實(shí)現(xiàn)在頁(yè)面中彈出一個(gè)窗口來(lái)顯示相關(guān)信息。

在 HTML 頁(yè)面中，可以使用 div 標(biāo)簽來(lái)創(chuàng)建一個(gè)容器，然后使用 CSS 樣式來(lái)定義這個(gè)容器的大小、位置、背景色等屬性。設(shè)置 div 標(biāo)簽的 display 屬性為 none，表示這個(gè)容器最開(kāi)始是隱藏的。

<div id="popup">
<p>這是一個(gè)彈出窗口</p>
</div>
#popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
background-color: #fff;
transform: translate(-50%, -50%);
}

上面的代碼創(chuàng)建了一個(gè) id 為 popup 的 div 容器，設(shè)置了它的 display 屬性為 none，即一開(kāi)始是隱藏的。接下來(lái)定義了這個(gè)容器的位置、大小、背景色等屬性，通過(guò)將 position 屬性設(shè)置為 absolute 并將 top 和 left 屬性都設(shè)置為 50%，使容器始終在頁(yè)面中居中。

當(dāng)需要彈出窗口時(shí)，可以使用 JavaScript 實(shí)現(xiàn)。通過(guò)找到 id 為 popup 的 div 元素，將它的 display 屬性設(shè)置為 block，即可讓它顯示。

const popup = document.getElementById("popup");
popup.style.display = "block";

當(dāng)需要關(guān)閉窗口時(shí)，可以將 display 屬性重新設(shè)置為 none，即可讓窗口隱藏。

const popup = document.getElementById("popup");
popup.style.display = "none";

總的來(lái)說(shuō)，使用 div CSS 彈出窗口可以方便地實(shí)現(xiàn)網(wǎng)頁(yè)中的彈出窗口功能，通過(guò)設(shè)置容器的大小、位置、背景色等屬性以及控制 display 屬性，可以靈活地控制窗口的顯示和隱藏。