js 弹出alert框
2015-07-30 18:52
627 查看
js code:
使用时,直接js调用:(弹出abc 2秒)
/** * 提示弹出框 * 用法:$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)
相关文章推荐
- json字符串转换为多级Map -list-map的形式
- js 获取访问链接参数
- JavaScript中操作对象的属性
- javascript实现列表滚动的方法
- [BZOJ1031][JSOI2007]字符加密Cipher
- js正则表达式匹配空格
- js字符串拼接时,日期控件中的双引号需要转义,不能用\"转义,要用&quot;
- JavaScript特效之前进,后退(返回上一级)
- JS魔法堂:再识instanceof
- 表单设计器系列之模板行的设置
- js闭包理解
- javascript 图片延迟加载
- JavaScript总结(终极大总结)
- JavaScript运行命令
- 高性能javascript读书笔记(一 加载和运行)
- JavaScript之邮箱验证(1)
- JavaScript之周道长浅谈变量使用中的坑
- javascript面向对象编程
- JSONP
- javaScript实现滚动新闻的方法