移动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)

 

---