Question

在应用程序“完成”（重新加载或在浏览器退出时）之前，未关闭 Bootstrap Toast （使用关闭按钮）。再次启动该应用程序时，“可见的吐司”下方的按钮虽然可见，但无法使用。因此，它看起来像烤面包片“停留在顶部”，但不可见。

该问题的解决方案是单击显示吐司的按钮，然后关闭吐司。现在所有按钮都可以单击。

引导程序4.3.1。使用包裹。有人可以解释吗？

Answer 1

在您的工作演示中，我可以通过以下两种方式（选择一种）隐藏页面加载时的吐司来解决此问题

1）在页面就绪时调用jQuery hide()：

$(document).ready(function(){
    // Hide the Toast
    $("#myToast").hide();

    $(".show-toast").click(function(){
        $("#myToast").toast('show');
    });
    $(".hide-toast").click(function(){
        $("#myToast").toast('hide');
    });
    $(".dispose-toast").click(function(){
        $("#myToast").toast('dispose');
    });
});

2）将hide类添加到吐司中：

<div class="toast hide" id="myToast" data-autohide="false" style="position: absolute; top: 0; right: 0;">

选项2更干净。但我知道hide类在引导程序中已被弃用，因此使用时，后果自负。不过，它确实适用于您的4.3.1版本，所以...

Answer 2

@DBro-“隐藏”类可完美运行。有一个用于隐藏元素的新类，新的引导程序（当前为4.4.1）：“ d隐藏”。不幸的是.toast（）并未将其删除，因此您必须执行以下操作：

var showNotification = function(){
    $('.toast').removeClass('d-none').toast({delay: 5000}).toast('show');
    setTimeout(function(){
        $('.toast').addClass('d-none')},
    6000);
}

等待一秒钟以添加类，只是为了使渐变过渡完成。并不完美，但是可以完成工作。

Answer 3

我发现这很好。

        $("#myToast, #myToast2, #myToast3").on("show.bs.toast", function() {
            $(this).removeClass("d-none");
        })
        $("#myToast, #myToast2, #myToast3").on("hidden.bs.toast", function() {
            $(this).addClass("d-none");
        })

靴子吐司仍在顶部（不可见）

3 个答案: