如何在 HTML 中重疊兩個 div（登錄時的成功消息）？

Question

我正在構建一個小的登錄頁面，成功登錄后，我希望彈出一個按摩（不是警報）。 我只想在登錄后在頁面中央顯示該消息。

有沒有辦法輕松實現？

現在網站的圖片

這個小消息窗口應該在頁面的中間

Answer 1

我稱之為模態。

 const overlay = document.querySelector("#overlay"); const button = document.querySelector("#button"); const closeButton = document.querySelector(".close"); button.onclick = () => { overlay.style.display = "grid"; } closeButton.onclick = () => { overlay.style.display = ""; } window.onclick = (e) => { if (e.target === overlay) { overlay.style.display = ""; } }

 .overlay { position: fixed; display: none; z-index: 999; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(100,100,100,0.4); } .modal { background-color: #fff; margin: auto; padding: 1em; border: 1px solid; width: 80vw; } .close { float: right; font-weight: bold; cursor: pointer; }

 <div id="overlay" class="overlay"> <div class="modal"> <button class="close">&times;</button> Congrats u logged in </div> </div> <button id="button">login</button>