HTML5 彈出窗口是現(xiàn)代網(wǎng)頁設(shè)計中廣泛使用的一個功能。通過彈出窗口，網(wǎng)頁可以在不離開主頁面的前提下展示更多的信息或者提供更多的交互功能。以下是一個展示如何使用 HTML5 實現(xiàn)彈出窗口的代碼示例：

首先，我們需要創(chuàng)建一個按鈕，用于觸發(fā)彈出窗口的顯示：

<button onclick="showPopup()">彈出窗口</button>

接著，我們需要定義彈出窗口的樣式：

<style>
#popup {
width: 300px;
height: 200px;
background-color: white;
border: 1px solid black;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
</style>

這里的樣式定義了彈出窗口的寬度、高度、背景顏色等等，同時將其設(shè)置為固定位置，居中顯示，并且初始狀態(tài)下不可見。

接下來，我們需要編寫彈出窗口的 HTML 代碼：

<div id="popup">
<h2>這是一個彈出窗口</h2>
<p>在這里可以展示更多的信息</p>
<button onclick="hidePopup()">關(guān)閉</button>
</div>

這部分代碼定義了一個包含標題、文本和關(guān)閉按鈕的 div 元素，作為彈出窗口的顯示區(qū)域。

最后，我們需要編寫 JavaScript 代碼，實現(xiàn)彈出窗口的顯示和隱藏功能：

<script>
function showPopup() {
document.getElementById("popup").style.display = "block";
}
function hidePopup() {
document.getElementById("popup").style.display = "none";
}
</script>

這段 JS 代碼定義了兩個函數(shù)，showPopup() 用于顯示彈出窗口，hidePopup() 用于隱藏它。兩個函數(shù)通過修改彈出窗口的樣式中的 display 屬性來實現(xiàn)這一功能。

綜上所述，這個 HTML5 彈出窗口示例代碼演示了如何通過按鈕觸發(fā)顯示彈出窗口，通過 CSS 樣式定義彈出窗口的外觀和位置，通過 JavaScript 實現(xiàn)彈出窗口的顯示和隱藏功能。這種彈出窗口可以為網(wǎng)頁提供更加豐富的交互方式和信息展示能力。