Bootstrap4 Toast 方法

下面是标准Bootstrap程序的Toast组件的方法

传递选项

我们还可以使用option对象将选项传递给 toast。

以下示例代码将阻止 toast 自动关闭。

$(document).ready(function(){
    $(".show-toast").click(function(){
        $("#myToast").toast({
            autohide: false
        });
    })

尝试一下

以下示例代码会将 toast 的自动隐藏时间增加到 10 秒。

$(document).ready(function(){
    $(".show-toast").click(function(){
        $("#myToast").toast({
            delay: 3000
        });
    }); 
});

尝试一下

.toast('show')

此方法用于显示 Toast。

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

尝试一下

.toast('hide')

这个方法是用来隐藏toast的。 如果将 autohide 设置为 false，则必须手动调用此方法。

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

尝试一下

.toast('dispose')

此方法隐藏元素的 toast。 Toast 将保留在 DOM 上，但不会再显示。

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

尝试一下