javascript - toast 通知超过 'overlay'

Question

我知道这不是 toastr(或一般的 toast notifs)的用途，但我想将它们用作模态通知。我的想法如下。

toast 秀:

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

然后 toast 关闭:

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

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

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

Answer 1

你做的对..

只需添加

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

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

toastr 的 ID toast-container其中有 z-index 999999。因此，为了将覆盖移动到 toastr 下面，请将 z-index 设置为 999999 以下。这是样式表中的默认情况。

你应该可以开始了:-)