如何自動隱藏多個警報。 先進先出？

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:');