全方位解析：一个页面上多个不同位置的 Toastr 提示消息显示秘诀

多彩的 Toastr：点亮你网页的灵动之窗

作为网页交互的重要组成部分，提示消息在用户操作中扮演着重要的角色。而 Toastr，作为轻量级且功能强大的提示信息库，因其简洁清晰的外观和高度的可定制性，深受众多网页开发者的青睐。

纵横交错，多点提示：探索 Toastr 在页面上的多维绽放

常常遇到这样的场景：需要在同一个网页的多个位置同时显示不同的 Toastr 提示信息，比如：

• 在页面顶部显示一个「成功」消息，提示用户操作已成功完成。
• 在页面底部显示一个「错误」消息，提示用户操作失败。
• 在侧边栏显示一个「警告」消息，提醒用户需要注意某项信息。

这时，如何巧妙地让 Toastr 在页面上的不同位置绽放光彩呢？这就需要我们深入了解 Toastr 的工作原理和定制配置。

揭开 Toastr 的神秘面纱：从源码入手，定制位置

要实现 Toastr 在页面上的多点提示，首先要从 Toastr 的源码入手，对其进行深入探究。Toastr 提供了一个名为 positionClass 的配置项，允许我们指定 Toastr 提示消息的位置。

toastr.options.positionClass = 'toast-top-right';

通过设置 positionClass 属性，我们可以将 Toastr 提示消息放置在页面的任意位置，比如：

• 将 Toastr 提示消息放置在页面顶部中央：

toastr.options.positionClass = 'toast-top-center';

• 将 Toastr 提示消息放置在页面底部中央：

toastr.options.positionClass = 'toast-bottom-center';

• 将 Toastr 提示消息放置在页面右上角：

toastr.options.positionClass = 'toast-top-right';

• 将 Toastr 提示消息放置在页面左下角：

toastr.options.positionClass = 'toast-bottom-left';

多重奏鸣：巧妙运用 Toastr 堆叠实现不同位置提示

除了使用 positionClass 属性来指定 Toastr 提示消息的位置外，我们还可以利用 Toastr 的堆叠功能（stacking）来实现同一页面上多个 Toastr 提示消息的显示。

toastr.options.stack = true;

开启堆叠功能后，Toastr 提示消息将以堆叠的方式显示，最新的消息会覆盖之前的消息。

toastr.success('操作成功！');
toastr.error('操作失败！');
toastr.warning('请注意！');

这样，即使我们在同一个页面上显示多个 Toastr 提示消息，它们也不会互相覆盖，而是以有序的方式显示。

Toastr 进驻 HTML：无缝衔接，畅享交互

为了在网页中使用 Toastr，我们需要将其引入 HTML 文件中：

<link href="toastr.min.css" rel="stylesheet">
<script src="toastr.min.js"></script>

然后，就可以在 JavaScript 代码中使用 Toastr 了：

toastr.success('操作成功！');
toastr.error('操作失败！');
toastr.warning('请注意！');

结语：多彩 Toastr，点亮网页交互之美

掌握了 Toastr 的这些妙用技巧，您就可以在网页上轻松创建出丰富多彩、位置多样的 Toastr 提示信息，让您的网页交互更加生动有趣。

无论是顶部、底部、中央、左右，还是堆叠显示，Toastr 都能完美契合您的需求，为您的网页增添灵动的交互之美。