如何一个一个地自动隐藏多个警报。先进先出？

Question

我在网页中有一个通知区域，它可以包含多个引导警报。

<div class='notification-area> </div>

我试图显示多个警报来，并使最古老的5秒后自动关闭，第一个先出。

​

​

，这是我到目前为止所拥有的。注意:它同时关闭了所有的一切。

showNotification(header: string, text: string, alertAttribute: string) {
            var notificationBoxID: string = "notificationBox" + $('.notification-area').children().length;


       //Appends this html into the notification-area class
        $('.notification-area').append(
            '<section id="' + notificationBoxID + '" class="alert  alert- dismissible" role="alert">' +
            '<button type="button" class="close" data-dismiss="alert"  aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
            '<p style ="font-weight: bold;" class="notification-message-header"></p>' +
            '<p class="notification-message-body"></p>' +

            '</section>'
            );

        // Selects the children  of the notificationBoxId section.
        var notificationSel = '#' + notificationBoxID;

        //set the notification: header, body and css style dynamically
        $(notificationSel + ' > .notification-message-header').text(header);
        $(notificationSel + ' > .notification-message-body').text(text);
        $(notificationSel).addClass(alertAttribute);

     // Auto hides alerts, oldest first
        $(".alert").show(() => {
            setTimeout(() => {
                $(".alert").fadeTo(500, 1).slideUp(500, () => {

                    $(notificationBoxID).hide();
                })
            }, 5000)
        });

有人知道我怎么处理这个问题吗？我什么都试过了。非常感谢。

Answer 1

烤面包有超时，因此它们被处理fifo。

<script src="toastr.js"></script>

  var options = {
    "preventDuplicates": true,
    "timeOut": 5000
  };
  toastr.options = options;
  toastr.warning('this is the message, 'Warning:');