我创建了通知系统,它工作正常,但如果你做了几次,它不会创建另一个它只是重叠,文本删除只是通知。

我怎样才能让它像这样,如果一个通知退出,它会在每个通知下方创建另一个通知?

window.addEventListener('message', function (event) {
    ShowNotif(event.data);
});

function ShowNotif(data) {
    if (data.type === 'adm') {
       launch_admin(data);
    } 
}

function launch_admin(data) {
    var x = document.getElementById("toast")
    x.className = "show";
    document.getElementById("image").src = "https://image.flaticon.com/icons/svg/196/196759.svg";
    document.getElementById("toast").style.backgroundColor = "rgba(227, 185, 70, 0.8)";
    document.getElementById("toast").style.borderRadius = "25px"
    document.getElementById("toast").style.borderStyle = "none"
    document.getElementById("desc").style.color = "#d43f3f"
    setTimeout(function(){ document.getElementById("desc").textContent  = data.text; }, 600);
    setTimeout(function(){ document.getElementById("desc").textContent  = ""; }, 4000);
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}


<div id="toast">
                <img id="image" alt="W3Schools" src="" style="width:50px;height:50px;float:left;padding-top:6px;padding-bottom:6px;box-sizing:border-box;">
                <div id="desc"></div>
</div>



#1楼 票数:0

在每个通知的末尾连接一个自关闭的 BR 标签,方法是直接在文本的末尾添加它,使它们更改如下所示的行:

('My Notification text here or in some variable') + "</br>";

  ask by Jeason translate from so

未解决问题?本站智能推荐:

1回复

Framework7附加通知重叠

我正在为UI使用framework7。 我在与navbar的背景重叠的addnotification中遇到问题。 我已经删除了navbar-through,但结果仍然相同。 我希望有一个人可以帮助我。 谢谢。
1回复

语义UI吐司通知重叠问题

我写了下面的标记来创建吐司通知,并且每当有通知时我都会显示div。 我面临的问题是吐司通知彼此重叠,但我希望它们是一个在另一个之下,以便如果第一个通知出现它应该在顶部,同时如果第二个通知出现它应该是在第一次通知之后或之下。 我希望它看起来像这样: 它们不应该相互重叠。
1回复

固定通知重叠

是否有用于固定通知的简单CSS / JS解决方法? 我将JSfiddle放在一起http://jsfiddle.net/Lcq6syLt-如您所见,我有两个固定的通知,但它们相互重叠。 有没有办法让他们彼此超越? 而不重叠? 我正在使用的CSS是:
2回复

模型重叠

我有两个模型和两个按钮。 每个按钮触发 1 个模型,按钮隐藏。 我想使用jQuery触发函数,比如$('#appbutton').click() 。 触发appmodel , dbmodel触发appmodel并且它们彼此重叠。 <button type="button" data-togg
1回复

JS Div重叠

好的,这杀死了我,我弄不清楚我在做什么错,我有多个div,它们的宽度为350px,高度为100px,我想避免它们重叠...这是我当前拥有的代码但它们仍然重叠,我不知道我在做什么错 页面加载时调用init()函数
3回复

桌子互相重叠

我的页面中有三个表...。所有三个表都重叠....如何避免三个表重叠.... http://jsfiddle.net/WG7kk/3/embedded/result/
1回复

重叠面板

我有两个具有相同类但有两个不同内容的面板。 每当我点击第一个面板的第一个链接或第二个面板的第二个链接时,它们都会同时出现,从而产生重叠。 我尝试为每个 ID 添加两个 ID,但似乎不起作用。 https://codepen.io/jinzagon/pen/VwammbJ HTML CS
4回复

SetTimeout重叠?

这是我的代码的一部分。 图像会在23毫秒后正确显示,但绝不会像第二行所说的那样变回隐藏状态。 如果我将其从17毫秒更改为大于23毫秒的值,则它可以工作。 反之亦然,如果我将第一行更改为16毫秒,它将起作用。 似乎第二行在第一行之前执行并完成,因此它保持可见状态。 我该如何解决?