教程 > bootstrap 5 教程 > 阅读:189

bootstrap5 警报(alerts) 方法——迹忆客-ag捕鱼王app官网

下面是标准 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}
    });
});

查看笔记

扫码一下
查看教程更方便
网站地图