Making a custom prompt message box based on JQuery
Code directly
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'})
}