大家好，今天我想要向你們分享一個有趣的HTML示例：表白彈窗！
首先，我們需要創建一個HTML文件，然后使用<link>引入一個CSS文件，其中包含我們彈窗的樣式。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="popup.css"> </head> <body> </body> </html>
接下來，在HTML文件中創建一個類為"popup"的DIV元素，用來包含我們的表白彈窗。我們還需要在DIV中添加一些文本內容，以及一個“關閉”按鈕。
<div class="popup"> <h2>我喜歡你！</h2> <p>你是我的心上人，我想要和你在一起。</p> <button class="close-button">關閉</button> </div>
我們還需要在CSS文件中添加彈窗樣式和按鈕樣式。
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
text-align: center;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
background-color: #f00;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
}最后，我們需要使用JavaScript代碼，以便在點擊“關閉”按鈕時，彈窗能夠消失。
let popup = document.querySelector('.popup');
let closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', () =>{
popup.style.display = 'none';
});這就是我們的HTML表白彈窗的全部內容了！現在，您可以在您的網站上使用這個彈窗來表達您的愛意。