首页 > 代码库 > 移动web简易提示框
移动web简易提示框
javascript代码
var msg={ count:0, show:function(value,time,width){ //type:定义显示样式,三种选择:success,notice,error;,不选则默认为success; //style:仅限定义提示层位置使用,默认底层提示栏上册15px处 var me=document; var comDom=me.createElement("div"); comDom.className="message-Container"; comDom.setAttribute(‘name‘,‘i_message-Container‘); comDom.id="iMessage"+this.count; comDom.style.width=window.innerWidth+"px"; var mDom=me.createElement("div"); mDom.style.webkitAnimationDuration=time+"s"; mDom.className=" message-style message-Animation"; if(width){ mDom.style.cssText+=" width:"+width+"px"; } mDom.innerHTML=value; comDom.appendChild(mDom); var hisMessge=me.getElementsByName(‘i_message-Container‘); var i=hisMessge.length-1; for(i;i>=0;i--){ if(hisMessge[i]){me.body.removeChild(hisMessge[i]);} else{break} } me.body.appendChild(comDom); comDom.style.cssText+=" top:"+(window.innerHeight/2-15)+"px"; this.count++; this.destory(comDom.id,time); }, destory:function(id,time){ var desMe=function(){ var cDom=document.getElementById(id); if(cDom){ document.body.removeChild(cDom); } }; setTimeout(desMe,time*1000+500); }}
css代码
/*开始-自定义弹出提示层*/.message-style{padding:0px 10px;margin:0 auto;min-width:100px;max-width:90%;text-align:center;position:relative;opacity: 0;-webkit-border-radius: 3px;background: #383838;border: 1px solid #202020;color: #fff;z-index: 1000;height: 30px;line-height: 30px;width: 80px;font-size: 14px;-webkit-box-shadow:1px 1px 3px #202020;}@-webkit-keyframes message-Transition{0%{opacity: 0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;}}.message-Animation{-webkit-animation-name:message-Transition;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;}.message-Container{text-align:center;width:100%;border:0px;padding:0px;position:fixed;}
调用方法:
msg.show(‘hello word‘,2)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。