今天來跟大家介紹一下如何使用HTML制作漂浮窗，并且還能加上關(guān)閉按鈕哦！ 首先，我們需要準(zhǔn)備一個div，設(shè)置其定位為fixed，top和left分別為50%，這樣就可以將其定位在頁面的正中央。 接下來，我們需要在這個div中添加一個封閉的按鈕圖標(biāo)。為了讓按鈕可以在鼠標(biāo)移上去的時候變成可點擊狀態(tài)，我們需要將其設(shè)置為cursor:pointer。 同理，當(dāng)鼠標(biāo)移出按鈕時，我們需要將其變回默認(rèn)狀態(tài)，所以還需要給按鈕添加一個鼠標(biāo)移出的事件。 最后，在js中，我們需要為按鈕添加一個點擊事件，讓它可以關(guān)閉漂浮窗。這里有一個小技巧，我們可以定義一個函數(shù)，先通過getElementById獲取到div，然后將其樣式display屬性設(shè)置為none，這樣就可以讓漂浮窗消失了。 下面是完整的代碼：

<div id="floatWindow" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);"><img src="close.png" alt="關(guān)閉" style="position:absolute; top:0; right:0; cursor:pointer;" onmouseout="this.style.opacity = 1.0" onmouseover="this.style.opacity = 0.5" onclick="closeFloatWindow()" /><p>這里是漂浮窗的內(nèi)容</p></div><script>function closeFloatWindow() {
document.getElementById("floatWindow").style.display = "none";
}
</script>

好了，以上就是制作HTML漂浮窗并加上關(guān)閉按鈕的方法。希望能對大家有所幫助。