h5css3浮動窗口

在現代網頁設計里，浮動窗口是極其常見的一種元素，可以用來展示圖片、視頻、廣告等內容。而在H5CSS3中，浮動窗口也被廣泛應用。下面我們就來看看如何實現一個簡單的浮動窗口：

/* HTML部分 */
<div class="popup">
<div class="popup-content">
<p>歡迎來到我的網站！</p>
<button class="close-btn">關閉</button>
</div>
</div>
/* CSS部分 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
z-index: 999;
display: none;
}
.popup-content {
padding: 20px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #ff0000;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
/* JS部分 */
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
popup.style.display = 'block';
closeBtn.addEventListener('click', () =>{
popup.style.display = 'none';
})

代碼分為三部分，分別是HTML、CSS和JS。首先我們在HTML中創建一個div元素，將其類名設為“popup”，表示這是我們的浮動窗口。然后在其內部創建另一個div元素，將其類名設為“popup-content”，表示窗口內部的內容。接著在“popup-content”中添加一句話和一個關閉按鈕。關閉按鈕的類名為“close-btn”。在CSS中，我們對“.popup”設置了一系列樣式，使得它位于瀏覽器居中且具有一定的樣式風格。而關閉按鈕則設置成了絕對定位，并設置了一個點擊事件，當點擊關閉按鈕時，浮動窗口消失。在JS中，我們通過querySelector后得到popup和closeBtn元素，將popup的style.display設為“block”，讓它默認顯示。同時也給關閉按鈕添加了一個點擊事件，當點擊時，將popup的style.display設為“none”，即可關閉浮動窗口。

以上是一個簡易的浮動窗口的實現，但它是可以作為對更復雜浮動窗口的基礎學習的。