“覆盖”上的吐司通知

Question

我知道它不是什么toastr（或一般的吐司通知）意味着用于，但我想将它们用作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回调中，添加show overlay $("#overlay").show();并在toastr.options.onHidden回调中将其隐藏.. $("#overlay").hide();

Toster的班级toast-container有z-index 999999。因此，为了将叠加层移到toastr下方，请将z-index设置为999999以下..这是样式表中的默认情况..

你应该好好去： - ）