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

Posted 2023-03-13

【中文标题】如何一一自动隐藏多个警报。先进先出？

【英文标题】：How to auto hide multiple alerts one by one. first in - first out?

【发布时间】：2016-02-26 04:44:54

【问题描述】：

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

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

有人知道我可以如何解决这个问题吗？我已经尝试了一切。非常感谢。

【参考方案1】：

toastr 有超时，所以它们被 fifo 处理。

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

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

【讨论】：

谢谢！那可能很有用。我实际上希望一次显示多个警报。但最老的会在一段时间后消失。

哦，这一次显示多个警报 :) 它们只是堆积在警报区域（在我的应用程序的右上角）。也许屏幕区域是可配置的。无论如何，如果您调用成功、信息、警告或错误，它只会在任何现有通知下方（或上方，如果您设置该属性）添加新通知。