基于JQuery制作自定义提示消息框

基于JQuery制作自定义提示消息框

直接上代码

function myAlert(message,time,params) {
    let width = 260;
    let height = 50;
    let color = "#FFF";
    let backgroundColor = "rgba(6,9,38,0.9)";
    console.log(isNaN(Number(time)))
    if(!time || isNaN(Number(time))){
        //默认值，2.5s
        time = 2500;
    }

    //获取顶级窗口
    let bodyEle = window.top.document.body;
    let divELe = document.createElement("div");

    divELe.className = 'myAlert';
    divELe.style.width = width+'px';
    divELe.style.height = height+'px';
    divELe.style.position = 'fixed';
    divELe.style.top = '0px';
    divELe.style.left = '50%';
    divELe.style.marginLeft = -width/2+'px';
    divELe.style.marginTop = '10px';
    divELe.style.color = color;
    divELe.style.backgroundColor = backgroundColor;
    divELe.style.textAlign = "center";
    divELe.style.lineHeight = height+"px";
    divELe.style.fontSize = "15px";
    divELe.style.border = "0px";
    divELe.style.borderRadius = "5px";


    divELe.style.display = "none";

    //设置给定参数
    if(params && params instanceof Object){
        for (let item in params){
            divELe.style[item] = params[item];
            if(item == 'width'){
                let width = params[item].substring(0,params[item].length-2)
                divELe.style.marginLeft = -width/2+'px';
            }
            if(item === 'height'){
                divELe.style.lineHeight = params[item];
            }
        }
    }
    divELe.innerText = message;
    bodyEle.appendChild(divELe);
    $(".myAlert").slideDown(200, () => {
        setTimeout(() => {
            $(".myAlert").slideUp(200,()=>{
                $(".myAlert").remove();
            })
        }, time)

    });
}
function errorAlert(message,time){
    myAlert(message,time,{color:'#FF0000'})
}
function successAlert(message,time){
    myAlert(message,time,{color:'#00FF00'})
}
function warningAlert(message,time){
    myAlert(message,time,{color:'#FFA500'})
}