使引导警报出现并可堆叠

Posted 2023-05-08

【中文标题】使引导警报出现并可堆叠

【英文标题】：Make bootstrap alerts apear and stackable

【发布时间】：2020-01-20 04:19:12

【问题描述】：

我想获得一个引导警报以显示在页面顶部并在几秒钟后消失。我已经完成了这部分，但现在我如何生成一条警报消息，如果第二个出现，它们会相互堆叠，如果一个消失，所有其他都将移动到正确的位置。

有没有简单的解决方案？

$(document).ready(function() 
  $("#successMessage").addClass('slide-down', 200).delay(2000).fadeOut(2000);
)

.slide-down 
  top: 55px !important;


.alertNotify 
  position: fixed;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1 !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="background-color: gray; width: 100%; height: 50px;">.
</div>
<label id="successMessage" class="alert alert-success alertNotify" type="button">Test Message</label>

代码：jsFiddle

【问题讨论】：

你可以在 Bootstrap 中查看 toast

【参考方案1】：

如果您想堆叠警报。您可以使用 z-index 来制作它。 z-index 越多，它就会出现在顶部。 例子。你可以创建另一个类

.alertMessage 
  position:fixed;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1 !important;

它的 z-index 比您之前的警报更多。 之后将其添加到您的另一个警报中。

<label id="alertMessage" class="alert alertMessage" type="button">Another Message</label>