“覆盖”上的吐司通知

Posted 2023-05-08

【中文标题】“覆盖”上的吐司通知

【英文标题】：toast notification over 'overlay'

【发布时间】：2014-10-18 11:04:23

【问题描述】：

我知道这不是 toastr（或一般的 toast 通知）的用途，但我想将它们用作 modal notification。我的想法如下。

吐司表演：

toastr.options.onShown = function()  //Create an overlay on the entire page

叠加层：

#overlay 
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;

吐司关门：

toastr.options.onHidden = function()  //make overlay go away 

另外，我将 toast 的超时设置为 0，这样它就不会自行消失。

问题：我希望 toast 通知保持在叠加层之上，而不是在其后面，因为叠加层会覆盖所有内容。我该怎么做？

【参考方案1】：

你做得对..

只需添加

<div id="overlay"></div> 在身体某处。在样式表中添加您需要的样式。

在toastr.options.onShown 回调中，添加显示覆盖$("#overlay").show(); 并在toastr.options.onHidden 回调中隐藏它.. $("#overlay").hide();

Toaster 的 id 为 toast-container，而 z-index 为 999999。因此，为了将叠加层移动到 toastr 下方，请将 z-index 设置为低于 999999。这是样式表中的默认情况。

你应该很高兴:-)

【讨论】：

请注意，toast-container 是一个 id，而不是一个类