Question

我的目标是使吐司看起来像漂浮在屏幕角落的内容上。我正在使用asp.net MVC core 2，它已经设置了bootstrap 4。我的其他自举程序工作正常。

为此，我查阅了各种教程，尤其是this one。

我将其中的任何代码示例粘贴到其中，并且吐司显示在页面上，但不透明度设置为0，因此不可见（根据.toast类的boostrap css）。

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

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

首先，问题是，当执行javascript并且没有控制台错误时，吐司仍然不可见。

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

第三，我想展示任意数量的吐司。但这可能还可以，因为我可以使每个时间将所有html都注入页面中的javascript函数，尽管它看起来似乎很笨拙-您不仅可以为警报定义模板并使用自定义消息/标题来加载它们吗？ / p>

最后，尽管具有data-dismiss="toast"属性，但烤面包角上的X不能关闭它。

我不禁感到有些东西丢失了，但是我正在引用引导CSS和JS文件。我已经尝试了许多示例，但是所有示例都具有相同的行为。

有什么想法吗？

编辑：在此处创建了fiddle here，您可以看到我手动添加了JS来更改不透明度。警报会占用空间。

Answer 1

我了解的是，在不带任何选项的情况下初始化它时，它会立即消失。

所以尝试一下：

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

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

我刚刚将上述代码行粘贴到您的小提琴中，它出现了。 https://jsfiddle.net/fyb3wh8c/2/