悬浮式的Toast通知

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通知在覆盖层上方保持可见，而不是被遮挡住。如何实现？

- Maxsteel

Answer 1

你做得很对。

只需在任何地方的body中添加

<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。这是您样式表中的默认情况。

你应该可以开始了 :-)

- Rahul Patil

---

提醒一下，toast-container 是一个 id，而不是一个 class。 - Willem Ellis