Bootstrap5 警报(Alerts) 方法

下面是标准 bootstrap 程序的警报方法：

close

此方法通过从 DOM 中删除警报来关闭警报。 如果元素上存在 .fade 和 .show 类，则警报将在删除之前淡出。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create alert instance
    var myAlert = new bootstrap.Alert(element);

    btn.addEventListener("click", function(){
        myAlert.close();
    });
});

尝试一下

dispose

此方法破坏元素的警报（即删除存储在 DOM 元素上的数据）。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create alert instance
    var myAlert = new bootstrap.Alert(element);

    btn.addEventListener("click", function(){
        myAlert.dispose();
    });
});

尝试一下

getInstance

这是一个静态方法，它允许您获取与 DOM 元素关联的警报实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    // Create alert instance
    var myAlert = new bootstrap.Alert(element);

    // Get tooltip instance on button click
    btn.addEventListener("click", function(){
        var alert = bootstrap.Alert.getInstance(element);
        console.log(alert);
        // {_element: div#myAlert.alert.alert-info.alert-dismissible.fade.show}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的警报实例，或者在警报未初始化的情况下创建一个新实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myAlert");

    btn.addEventListener("click", function(){
        var myAlert = bootstrap.Alert.getOrCreateInstance(element);
        console.log(myAlert);
        // {_element: div#myAlert.alert.alert-info.alert-dismissible.fade.show}
    });
});

尝试一下