'overlay' 上的 toast 通知

Question

我知道这不是 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 通知保持在覆盖层之上而不是在其后面，因为覆盖层将覆盖所有内容。我该怎么做？

Answer 1

你做得对..

只需添加

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

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

Toaster 的 idtoast-container为z-index999999。因此，为了将覆盖移动到 toastr 下方，请将 z-index 设置为 999999 以下。这是样式表中的默认情况。

你应该很高兴:-)