首页 > 代码库 > 移动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)