如何在 HTML 中重叠两个 div（登录时的成功消息）？

Question

I am building a little login page and when successfully logged in I want a massage to pop up (not an alert). I just want to have that message in the center of the page after I logged in.

Is there a way to implement that easily?

picture of the website now

This little message window should be in the middle of the page

Answer 1

I would call this a modal.

 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>