时间戳

首页 > 解决方案 > Toasts 是不可见的，不能在 Bootstrap 4 中关闭

bootstrap-4 - Toasts 是不可见的，不能在 Bootstrap 4 中关闭

问题描述

我的目标是能够让 toasts 出现在屏幕角落的我的内容上。我正在使用 asp.net MVC core 2，它已经设置了 bootstrap 4。我的其他引导程序工作正常。

为此，我查阅了各种教程，尤其是这个。

我粘贴了任何这些代码示例，toast 出现在页面上，但不透明度设置为 0，因此它是不可见的（根据 .toast 类的 boostrap css）。

它提到“您必须自己初始化它们”，但没有解释初始化它们是否将不透明度设置为 1。

底部有一些代码，javascript，但不清楚你是否需要这个。确定初始化注释意味着您需要调用这些方法中的一个或多个，我$('.toast').toast(); $('.toast').show();在页面底部添加了一个脚本标记。

问题是，首先，当 javascript 执行并且没有控制台错误时，没有任何反应，toast 仍然不可见。

其次，即使它是隐藏的，当我希望它漂浮在屏幕角落的顶部时，吐司也会占用页面上的空间。尽管使用了在 Placement 部分中执行此操作的示例 - 尽管第一个 div 是相对定位的，这看起来很奇怪，但我希望它是绝对的。

第三，我想显示任意数量的祝酒词。但这可能没问题，因为我可以制作一个 javascript 函数，每次都将所有 html 注入页面，尽管它看起来很笨拙 - 你能不能只为警报定义一个模板并使用自定义消息/标题加载它们？

data-dismiss="toast"第四，尽管有属性，toast 角落的 X 无法关闭它。

我不禁觉得有些东西不见了，但我正在引用引导 CSS 和 JS 文件。我已经尝试了很多例子，但都有相同的行为。

有任何想法吗？

编辑：在这里创建了一个小提琴，你可以看到我已经手动添加了 JS 来改变不透明度。警报虽然占用空间。

标签： bootstrap-4asp.net-core-mvc

解决方案

我的理解是，当您在没有任何选项的情况下对其进行初始化时，它会立即出现和消失。

所以试试这个：

  $('.toast').toast({
    'autohide': false
  });

  $('.toast').toast('show');

我刚刚在你的小提琴中粘贴了上面的代码行，它就出现了。 https://jsfiddle.net/fyb3wh8c/2/

推荐阅读