堆叠CSS / HTML Toast-消失的问题

由 发布于 cssjavascripttoasthtml
 收藏

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>
评论