您的位置:首页 > Web前端 > JavaScript

js 弹出alert框

2015-07-30 18:52 627 查看
js code:

/**
*   提示弹出框
*   用法:$toast("网络超时,请重试!",1000); 自动消失
*   //	$toast("加载中...");   手动消失方法。    $closeToast(1); 关闭方法。
**/
var missshield= null ;
var missalertFram = null ;
function $toast(text,ms)
{
if(isEmtp(ms)){
missshield= document.createElement("DIV");
missalertFram = document.createElement("DIV");
missshield.style.position = "absolute";
missshield.style.left = "0px";
missshield.style.top = "0px";
missshield.style.width = "100%";
missshield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
missshield.style.background = "#333";
missshield.style.textAlign = "center";
missshield.style.zIndex = "10000";
missshield.style.filter = "alpha(opacity=0)";
missshield.style.opacity = 0.5;
missalertFram.id="alertFram";
missalertFram.style.position = "absolute";
missalertFram.style.left = "50%";
missalertFram.style.top = "50%";
missalertFram.style.marginTop = -120+document.documentElement.scrollTop+"px";
missalertFram.style.textAlign = "center";
missalertFram.style.lineHeight = "-20px";
missalertFram.style.zIndex = "10001";
missshield.id = "shield";
missalertFram.style.marginLeft = "-100px" ;
missalertFram.style.width = "200px";
missalertFram.style.height = "100px";
strHtml   = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%;opacity: 1;\">\n";
strHtml += " <li style=\"background:rgba(0,0,0,0.8);text-align:center;height:100px;line-height:30px;border-radius: 10px;font-style:inherit;color: white;\"><img src=\""+imageurl+"css/images/ajax-loader.gif\" width=\"35px;\" height=\"35px;\" style=\padding-top:10px;\"><p style=\"text-align:center;font-size:19px;height:50px;font-style:inherit;color: white;\"> "+text+"</p></li>\n";
strHtml += "</ul>\n";
missalertFram.innerHTML = strHtml;
document.body.appendChild(missalertFram);
document.body.appendChild(missshield);
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*100;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
}
}catch(e){}
};
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity("shield",c);
};
var ad = setInterval("doAlpha()",1);
document.body.onselectstart = function(){return true;};
document.body.oncontextmenu = function(){return true;};
}
else{
missshield= document.createElement("DIV");
missalertFram = document.createElement("DIV");
missshield.style.position = "absolute";
missshield.style.left = "0px";
missshield.style.top = "0px";
missshield.style.width = "100%";
missshield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+20+"px";
missshield.style.background = "#333";
missshield.style.textAlign = "center";
missshield.style.zIndex = "10000";
missshield.style.filter = "alpha(opacity=0)";
missshield.style.opacity = 0.5;
missalertFram.id="alertFram";
missalertFram.style.position = "absolute";
missalertFram.style.left = "50%";
missalertFram.style.top = "50%";
missalertFram.style.marginTop = -120+document.documentElement.scrollTop+"px";
missalertFram.style.textAlign = "center";
missalertFram.style.lineHeight = "-20px";
missalertFram.style.zIndex = "10001";
missshield.id = "shield";
missalertFram.style.marginLeft = "-120px" ;
missalertFram.style.width = "240px";
missalertFram.style.height = "100px";
var px = 90;
if(text.length>13&&text.length<26){
px = 45;
text = text.substring(0,text.length/2) +"<br>"+text.substring(text.length/2,text.length);
}else if(text.length>26&&text.length<39){
px = 30;
text = text.substring(0,text.length/3) +"<br>"+text.substring(text.length/3,text.length-text.length/3)+"<br>"+text.substring(text.length-text.length/3,text.length);
}
strHtml   = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%;opacity: 1;\">\n";
strHtml += " <li style=\"background:rgba(0,0,0,0.8);text-align:center;font-size:17px;height:90px;line-height:"+px+"px;border-radius: 10px;font-style:inherit;color: white;\">"+text+"</li>\n";
strHtml += "</ul>\n";
missalertFram.innerHTML = strHtml;
document.body.appendChild(missalertFram);
document.body.appendChild(missshield);
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100;
try{ obj.style.opacity=opacity; }catch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*100;
}else{
obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
}
}catch(e){}
};
var c = 0;
this.doAlpha = function(){
if (++c > 20){clearInterval(ad);return 0;}
setOpacity("shield",c);
};
var ad = setInterval("doAlpha()",1);
document.body.onselectstart = function(){return true;};
document.body.oncontextmenu = function(){return true;};
}
if(!isEmtp(ms)){
setTimeout("$closeToast()",ms);
}
};
/**
*   关闭
**/
function $closeToast(){
try {

document.body.removeChild(missalertFram);
document.body.removeChild(missshield);
document.body.onselectstart = function(){return false;};
document.body.oncontextmenu = function(){return false;};
missalertFram.style.display = "none";
missshield.style.display = "none";
} catch (e) {
document.body.removeChild(document.getElementById("alertFram"));
document.body.removeChild(document.getElementById("shield"));
document.body.onselectstart = function(){return false;};
document.body.oncontextmenu = function(){return false;};
missalertFram.style.display = "none";
missshield.style.display = "none";
}

}

/**
*   空验证
**/
function isEmtp(val){
if(val == null || val == "" || val == "undefined" || val == undefined || val == "null" || val == "(null)" || val == 'NULL' || typeof(val) == 'undefined')
{
return false;
}else {
return false;
}
}


使用时,直接js调用:(弹出abc 2秒)
$toast("abc",2000)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: