我是一名学生,这是我第一次来这里!
所以我第一次尝试编写一个 toast 通知,这是我的:
问题是,当我添加其中几个时,5 秒后,它们就会低于所有值。我希望它是这样的,但在他们都消失之后。我不知道如何在每个 toast 通知中添加个人消失时间。所以当一个消失后,其他的也是这样:
容器必须消失,因为无论哪种方式,我都无法单击其下方的“添加到购物车”按钮。
您知道如何解决这个问题吗?如果您还有任何代码建议,请随时告诉我!
这是代码(有点混乱,因为我尝试关注 youtube 视频,然后添加我自己的东西,然后我尝试使用 Gemini(Google AI)找到解决方案,所以是的......):
function toastNotification(msg) {
const alertContainer = document.querySelector(".container-alert"); // Select the container
const newAlert = document.createElement("div"); // Create a new alert element
newAlert.classList.add("alert", "showAlert"); // Add necessary classes
// ...
const closeBtn = document.createElement("div");
closeBtn.classList.add("close-btn");
const closeIcon = document.createElement("i");
closeIcon.classList.add("fas", "fa-times");
closeBtn.appendChild(closeIcon);
newAlert.appendChild(closeBtn);
// Append the new alert to the container
alertContainer.appendChild(newAlert);
// Add animation for showing and hiding the alert
newAlert.classList.add("show");
alertContainer.style.zIndex = "9999";
setTimeout(() => {
newAlert.classList.remove("show");
newAlert.classList.add("hide");
// Remove the alert after hiding animation
setTimeout(() => {
alertContainer.removeChild(newAlert);
alertContainer.style.zIndex = "-1";
}, 5000);
}, 5000);
closeBtn.addEventListener("click", () => {
newAlert.classList.remove("show");
newAlert.classList.add("hide");
// Immediately remove the alert if closed manually
setTimeout(() => {
alertContainer.removeChild(newAlert);
alertContainer.style.zIndex = "-1";
}, 5000);
});
}
toastNotification("hello world")
setTimeout(() => toastNotification("hello world2"), 1000)
.container-alert {
width: 30rem;
position: fixed;
right: 0;
bottom: 0px;
display: flex;
align-items: center;
justify-content: end;
flex-direction: column;
overflow: hidden;
padding: 20px;
z-index: -1;
}
.alert {
overflow: hidden;
opacity: 0;
pointer-events: none;
width: 27rem;
height: 5rem;
font-weight: 500;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
}
.alert.showAlert {
opacity: 1;
pointer-events: auto;
background-color: #fff;
}
<div class="container-alert">
<div class="alert hide">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 48 48">
<defs>
<mask id="ipSCheckOne0">
<g fill="none" stroke-linejoin="round" stroke-width="4">
<path fill="#fff" stroke="#fff" d="M24 44a19.937 19.937 0 0 0 14.142-5.858A19.937 19.937 0 0 0 44 24a19.938 19.938 0 0 0-5.858-14.142A19.937 19.937 0 0 0 24 4A19.938 19.938 0 0 0 9.858 9.858A19.938 19.938 0 0 0 4 24a19.937 19.937 0 0 0 5.858 14.142A19.938 19.938 0 0 0 24 44Z"/>
<path stroke="#000" stroke-linecap="round" d="m16 24l6 6l12-12"/>
</g>
</mask>
</defs>
<path fill="#30d300" d="M0 0h48v48H0z" mask="url(#ipSCheckOne0)"/>
</svg>
<span class="msg"></span>
<div class="close-btn">
<span class="fas fa-times"></span>
</div>
</div>
</div>
我找到了解决方案!
因此,当您调用 toastNotification 函数时,您会将 z-index 设置为 -1 一行。不像我那样在函数中。所以我删除了超时的 z-index 行并将其移动到它应该在的位置!
const cartButtons = document.querySelectorAll(".cart-button");
cartButtons.forEach(cartButton=>{
currentMsg = msg + "ajouté au panier !"
cartButton.addEventListener('click', ()=>{
toastNotification(currentMsg);
alertContainer.style.zIndex = "-1";
});
});