如何自動隱藏多個警報一個接一個。先入先出？

我在網頁上有一個通知區域，其中可以包含多個引導程序警報。如何自動隱藏多個警報一個接一個。先入先出？

<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) 
     });

任何人都知道我該如何解決這個問題？我已經嘗試了一切。非常感謝。

來源

2015-11-23 Andi Milhomme

toastr有超時，所以他們被處理fifo。

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

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

來源

2015-11-23 22:31:13 toddmo

謝謝！這可能是有用的。我實際上希望一次顯示多個警報。但最古老的會在一段時間後消失。 –

哦，它一次顯示多個警報:)他們只是堆積在警報區域（在我的應用程序，右上角）。也許屏幕區域是可配置的。無論如何，它稱爲成功，信息，警告或錯誤，它只是添加新的通知下任何現有的（或以上，如果你設置該屬性）。 – toddmo

它完美地工作。非常感謝 –

如何自動隱藏多個警報一個接一個。先入先出？

回答

相關問題