I have been trying to follow a tutorial from w3schools toast which only allows one toast a time. I am trying to modify it to allow to show more than one toast a time.
我通过创建一个烤面包架并在里面添加烤面包来完成这项工作。但是,使它们消失的setTimeout(function(){}只消失了一个。这意味着多个祝酒词会一直保留在屏幕上,并且不会删除它们的“ show”类。我知道如何使每个祝酒词每3个一个就删除一次秒?
的JavaScript
var toastCount = 0;
function displayToast(type, message)
{
toastCount++;
var toastID = 'toast'+toastCount;
document.getElementById("toast-holder").innerHTML += '<div id ="'+toastID+'"></div>';
var x = document.getElementById(toastID);
x.innerHTML = message;
addClass(x, "toast");
if(type == 1)
{
addClass(x, "color-dark");
}
else
{
addClass(x, "color-warning");
}
addClass(x, "show");
setTimeout(function(){ removeClass(x, "show"); }, 3000);
}
function addClass(element, className)
{
if(!element.classList.contains(className))
{
element.classList.add(className);
}
}
function removeClass(element, className)
{
if(element.classList.contains(className))
{
element.classList.remove(className);
}
}
的CSS
.toast-holder {
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the toast */
bottom: 45px; /* 30px from the bottom */
}
.toast {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
margin-bottom: 3px; /* Spacing for stack */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
}
的HTML
<div class ="toast-holder" id ="toast-holder"></div>