综合案例 --- Bootstrap5 提示框(Alert)

1. Alert 警示框使用流程

1. HTML标签片段

<div class="alert info-box">
</div>

2. CSS 控制显示位置

.info-box{
    width: 360px;
    position: absolute;
    top: 120px;
    left: 360px;
    z-index: 10;
}

3. alert.js

function myAlert(isSuccess,message) {
    const myAlert = document.querySelector(".alert")
    myAlert.classList.add(isSuccess ? "alert-success" : "alert-danger")
    myAlert.innerHTML = message
    myAlert.classList.add("show")

    setTimeout(()=>{
        myAlert.classList.remove(isSuccess ? "alert-success" : "alert-danger")
        myAlert.innerHTML = ""
        myAlert.classList.remove("show")
    },2000)
}

4. 调用

myAlert(true,"登录成功")

myAlert(false,"验证码错误")